What does “Stateless function components cannot be given refs” mean?

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.