JavaScript React Components Managing State and Data Flow Update State Based on a Player's Index

Rishi B
Rishi B
13,866 Points

why player props are shown 'undefined'?

import React, {Component} from 'react';
import { v1 as uuidv1 } from 'uuid';

import Header from './Header';
import Player from './Player';

class App extends Component {
  state = {
    players: [
      {
        name: "Guil",
        score: 0,
        id: 1
      },
      {
        name: "Treasure",
        score: 0,
        id: 2
      },
      {
        name: "Ashley",
        score: 0,
        id: 3
      },
      {
        name: "James",
        score: 0,
        id: 4
      }
    ]
  };

  handleScoreChange = (delta) => {
      console.log(delta);
  }

  handleRemovePlayer = (id) => {
    this.setState( prevState => {
      return {
        players: prevState.players.filter(p => p.id !== id)
      };
    });
  }

  render() {
    return (
      <div className="scoreboard">
        <Header 
          title="Scoreboard" 
          totalPlayers={this.state.players.length} 
        />

        {/* Players list */}
        {this.state.players.map( (index,player) =>
          <Player 
            name={player.name}
            score={player.score}
            index = {index}
            id={player.id}
            key= {uuidv1()}
            changeScore = {this.handleScoreChange}
            removePlayer = {this.handleRemovePlayer}           
          />
        )}
      </div>
    );
  }
}

export default App;