
Graham Morby
8,292 PointsUncaught ReferenceError: delta is not defined
Not sure where its gone wrong
var PLAYERS = [
{
name: "Graham Morby-Raybould",
score: 31,
id: 1,
},
{
name: "Clint Dempsey",
score: 35,
id: 2,
},
{
name: "Chris Mcquire",
score: 42,
id: 3,
},
];
function Header(props) {
return (
<div className="header">
<h1>{props.title}</h1>
</div>
);
}
Header.propTypes = {
title: React.PropTypes.string.isRequired,
};
function Counter(props) {
return (
<div className="counter">
<button className="counter-action decrement" onClick={function() {props.onChange(-1);}}> - </button>
<div className="counter-score"> {props.score} </div>
<button className="counter-action increment" onClick={function() {props.onChange(1);}}> + </button>
</div>
);
}
Counter.propTypes = {
score: React.PropTypes.number.isRequired,
onChange: React.PropTypes.func.isRequired,
}
function Player(props) {
return (
<div className="player">
<div className="player-name">
{props.name}
</div>
<div className="player-score">
<Counter score={props.score} onChange={props.onScoreChange} />
</div>
</div>
);
}
Player.propTypes = {
name: React.PropTypes.string.isRequired,
score: React.PropTypes.number.isRequired,
onScoreChange: React.PropTypes.func.isRequired,
};
var Application = React.createClass({
propTypes: {
title: React.PropTypes.string,
initialPlayers: React.PropTypes.arrayOf(React.PropTypes.shape({
name: React.PropTypes.string.isRequired,
score: React.PropTypes.number.isRequired,
id: React.PropTypes.number.isRequired,
})).isRequired,
},
getDefaultProps: function() {
return {
title: "Scoreboard",
}
},
getInitialState: function() {
return {
players: this.props.initialPlayers,
};
},
onScoreChange: function(index, delta) {
console.log('onScoreChange' , index , delta);
this.state.players[index].score += delta;
this.setState(this.state);
},
render: function() {
return (
<div className="scoreboard">
<Header title={this.props.title} />
<div className="players">
{this.state.players.map(function(player, index) {
return (
<Player
onScoreChange={function(){this.onScoreChange(index ,delta)}.bind(this)}
name={player.name}
score={player.score}
key={player.id} />
);
}.bind(this))}
</div>
</div>
);
}
});
ReactDOM.render(<Application initialPlayers={PLAYERS}/>, document.getElementById('container'));
1 Answer

Graham Morby
8,292 PointsFixed myself!
onScoreChange={function(delta <---- Missing here!){this.onScoreChange(index ,delta)}.bind(this)}