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.