What does "Stateless function components cannot be given refs" mean?

user_554807 0
Viewed 39446

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.

react-redux redux reactjs javascript
2 Answers

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. error encountered when I was using functional component

Code snippet corresponding to Functional Component

code for square component

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

it worked

Code snippet corresponding to Class Component.

enter image description here

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

user_57636270
Related