JavaScript React Components Managing State and Data Flow Communicating Between Components

cody gamble
PRO
cody gamble
Pro Student 11,801 Points

I am getting this error TypeError: props.changeScore is not a function

There has not been a clear answer on any of the previous questions with the same name,

import React from 'react';

const Counter = (props) => {

return (
  <div className="counter">
    <button className="counter-action decrement" onClick={() => props.changeScore(-1)}> - </button>
    <span className="counter-score">{ props.score }</span>
    <button className="counter-action increment" onClick={() => props.changeScore(1)}> + </button>
  </div>
);

}

export default Counter;

cody gamble
cody gamble
Pro Student 11,801 Points

One discussion OP said he found an error in his App.js, but he never mentioned what it was

import React, { Component } from 'react';
import Header from './Header';
import Player from './Player';

class App extends Component {
  state = {
    players: [
      {
        name: "Cody",
        score: 0,
        id: 1
      },
      {
        name: "Max",
        score: 0,
        id: 2
      },
      {
        name: "Sam",
        score: 0,
        id: 3
      },
      {
        name: "Zoe",
        score: 0,
        id: 4
      }
    ]
  };

  handleScoreChange = (delta) => {
    // this.setState( prevState => ({
    //   score: prevState.score + 1
    // }));
    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( player =>
          <Player 
            name={player.name}
            score={player.score}
            id={player.id}
            key={player.id.toString()} 
            ChangeScore={this.handleScoreChange}
            removePlayer={this.handleRemovePlayer}           
          />
        )}
      </div>
    );
  }
}

export default App;

1 Answer

cody gamble
PRO
cody gamble
Pro Student 11,801 Points

Ah HA! I found my problem

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

the changeScore prop in the player component I had capitalized the first letter by accident