What does “Stateless function components cannot be

Question

I have this:

const ProjectsSummaryLayout = ({projects}) => {
   return (
      <div className="projects-summary col-md-10">
          <h3>Projects</h3>
          <ul>
              { projects.map(p => <li key={p.id}>{p.contract.client}</li>) }
          </ul>
      </div>
   )
}

const ProjectsSummary = connect(
   state => ({projects: state.projects})
)(ProjectsSummaryLayout)

and I get:

Warning: Stateless function components cannot be given refs (See ref "wrappedInstance" in ProjectsSummaryLayout created by Connect(ProjectsSummaryLayout)). Attempts to access this ref will fail.

What is it trying to tell me? Am I actually doing something wrong?

I see discussion about this here but unfortunately I simply don't understand the conclusion.

Answer 1

In React, refs may not be attached to a stateless component.

React Redux 3 attaches a ref to the component you give it regardless of whether or not it's stateless. The warning you see comes from React because internally, React Redux 3 attaches a ref to the stateless component you supplied (ProjectsSummaryLayout).

You're not doing anything wrong and according to this GitHub comment, you can safely ignore the warning.

In React Redux 4, no ref is attached to the wrapped component by default, which means if you upgrade to React Redux 4, the warning should go away.

Answer 2

React has 2 commonly used component styles.

• Functional Component
• Class Component

So, When I was making use of Functional one then I was encountering this error.

Code snippet corresponding to Functional Component

But as soon as I changed it to Class Component then it worked.

Code snippet corresponding to Class Component.

Try changing Functional Component to Class Component. I hope it will resolve your problem.