class PicksLeaderboard extends React.Component { constructor(props) { super(props); this.state = { john: [{ win: true }, { win: false }, { win: false }], matt: [{ win: true }, { win: true }, { win: true }], mark: [{ win: false }, { win: true }, { win: true }] }; } handleWin (name) { this.setState({ [name]: [...this.state[name], {win: true}] }); } renderPlayerRow ({name, score}) { return ( <tr> <td> <b>{name}</b> <button onClick={() => this.handleWin(name)}>WIN+1</button> </td> <td>{score}</td> </tr> ); } render () { const players = Object.keys(this.state).map(name => { const picks = this.state[name]; const score = picks.reduce((score, pick) => score + (pick.win ? 1 : 0), 0); return {name, score}; }); players.sort((a, b) => b.score - a.score); const playerRows = players.map(player => this.renderPlayerRow(player)); return <table>{playerRows}</table>; } } React.render( <PicksLeaderboard />, document.getElementById('root') );