CODEWITHSUNDEEP
javascriptreactjsmappingreact-props
BJones100
BJones100

Reputation: 67

React JS mapping / displaying elements

so I'm trying to pass the player array as props to the App component then use mapping to iterate over initialPlayers and return a player component for each object in the array. Please check the below image.

This is the App.js page. ReactDOM.render is in index.js.

I receive this error:enter image description here

TypeError: Cannot read property 'initialPlayers' of undefined

Any good and quick advice please?

Thank you

class App extends Component {
constructor(props) {
    super(props);
    this.state = {};
}

render() {

    const players = [

        { name: "Dex",
            score: 33
        },
        {
            name: "Rocko",
            score: 61
        },
        {
            name: "Lance",
            score: 29
        },
        {
            name: "Zane",
            score: 42
        },

    ];


ReactDOM.render(
  <React.StrictMode>
    <App players />,
  </React.StrictMode>,
  document.getElementById('root')
);

Upvotes: 0

Views: 54

Answers (2)

Nico
Nico

Reputation: 1

Try by modifying like this:

ReactDOM.render(
  <React.StrictMode>
    <App players={players} />,
  </React.StrictMode>,
  document.getElementById('root')
);

In the way you wrote the code, players will be evaluated like an attribute instead of prop.

Furthermore, I suggest you to check your prop.initialPlayers before to iterate a map because it could be undefined (in your case you're having these error because of naming -> it should be players instead of initialPlayer or vice-versa) so, for example, you could write something like:

{(props.players || []).map(etc.)}

Upvotes: 0

Bahtiyar
Bahtiyar

Reputation: 192

Hı ,

you pass as props is name players and why do you try to call initialPlayers ?

try this :

props.players.map

Upvotes: 1

Related Questions