Drop the display of the ID value, because that's meaningless to a
user, and then also just put the team into parens after the player (or
omit those parens entirely if the player is not on a team).
And use a single prop for all of this information instead of a
separate prop for each property of the player_info object.
}
function PlayerInfo(props) {
- if (! props.id)
+ if (! props.player.id)
return null;
return (
<div className="player-info">
<h2>Player</h2>
- {props.name}, ID: {props.id},
- {props.team ? ` on team ${props.team}` : " not on a team"}
+ {props.player.name}
+ {props.player.team ? ` (${props.player.team})` : ""}
</div>
);
}
/>,
<PlayerInfo
key="player-info"
- id={state.player_info.id}
- name={state.player_info.name}
- team={state.player_info.team}
+ player={state.player_info}
/>,
<div key="game" className="game">
<button className="inline"