It's a little trickier to deal with an array (both on the setState
side and when using the map() function to generate React elements) but
it's not too bad.
Thanks for the help, Richard!
<h2>Players</h2>
{props.player.name}
{props.player.team ? ` (${props.player.team})` : ""}
<h2>Players</h2>
{props.player.name}
{props.player.team ? ` (${props.player.team})` : ""}
- {", "}
- {props.opponent.name}
- {props.opponent.team ? ` (${props.opponent.team})` : ""}
+ {props.opponents.map(opponent => (
+ <span key={opponent.id}>
+ {", "}
+ {opponent.name}
+ {opponent.team ? ` (${opponent.team})` : ""}
+ </span>
+ ))}
this.state = {
game_info: {},
player_info: {},
this.state = {
game_info: {},
player_info: {},
history: [
{
squares: Array(9).fill(null)
history: [
{
squares: Array(9).fill(null)
}
set_opponent_info(info) {
}
set_opponent_info(info) {
+ const new_opponents = [...this.state.opponent_info];
+ const idx = new_opponents.findIndex(o => o.id === info.id);
+ if (idx >= 0) {
+ new_opponents[idx] = info;
+ } else {
+ new_opponents.push(info);
+ }
+ opponent_info: new_opponents
<PlayerInfo
key="player-info"
player={state.player_info}
<PlayerInfo
key="player-info"
player={state.player_info}
- opponent={state.opponent_info}
+ opponents={state.opponent_info}
/>,
<div key="game" className="game">
<button className="inline"
/>,
<div key="game" className="game">
<button className="inline"