React ‘cannot read property of undefined’ when using map

by

You have not done binding for the map function where you are using onScoreChange = {this.onPlayerScoreChange},

you can either use bind or arrow functions for binding

P.S. Binding is needed because the context of the map function is different from the React Component context and hence this inside this function won’t be Referring to the React Components this and thus you can’t access that properties of the React Component class.

With Arrow function:

 {this.state.initialPlayers.map((player, index)=> {
                return(
                    <Player 
                    name = {player.name} 
                    score = {player.score} 
                    key = {player.id} 
                    index = {index}
                    onScoreChange = {this.onPlayerScoreChange}
                    />
                )
            })}

With bind

   {this.state.initialPlayers.map(function(player, index) {
                return(
                    <Player 
                    name = {player.name} 
                    score = {player.score} 
                    key = {player.id} 
                    index = {index}
                    onScoreChange = {this.onPlayerScoreChange}
                    />
                )
            }.bind(this))}

More Related Contents:

  1. How to create a translucent in React Native?
  2. setState doesn’t update the state immediately
  3. Trying to use fetch and pass in mode: no-cors
  4. ReactJS Two components communicating
  5. react-router scroll to top on every transition
  6. What the difference of this.state and this.setstate in ReactJS?
  7. React.js: onChange event for contentEditable
  8. How to update single value inside specific array item in redux
  9. Updating and merging state object using React useState() hook
  10. componentDidMount equivalent on a React function/Hooks component?
  11. How do I update states `onChange` in an array of object in React Hooks
  12. Can I update a component’s props in React.js?
  13. Embedding SVG into ReactJS
  14. useEffect does not listen for localStorage
  15. setTimeout for this.state vs useState
  16. Update React component every second
  17. How can I disable all typescript type checking?
  18. how to set displayName in a functional component [React]
  19. React code throwing “TypeError: this.props.data.map is not a function”
  20. Why need useRef and not mutable variable?
  21. How to force a functional React component to render?
  22. Using a Set data structure in React’s state
  23. How to download fetch response in react as file
  24. React hook useEffect runs continuously forever/infinite loop
  25. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  26. Browser Detection in ReactJS
  27. Exporting functions with reactjs and babel
  28. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  29. State not getting updated when calling the related setState in React
  30. Enzyme simulate an onChange event

Leave a Comment