Edit in JSFiddle

class PicksLeaderboard extends React.Component {
  renderPlayerRow ({name, score}) {
  	return (
    	<tr>
    	  <td>
          <b>{name}</b>
          <button onClick={() => this.props.handleWin(name)}>WIN+1</button>
         </td>
    	  <td>{score}</td>
    	</tr>
    );
  }
  render () {
  	const players = Object.keys(this.props.data).map(name => {
    	const picks = this.props.data[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>;
  }
}

class PicksLeaderboardContainer 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}]
    });
  }
  render () {
  	return <PicksLeaderboard handleWin={name => this.handleWin(name)} data={this.state} />;
  }
}

React.render(
	<PicksLeaderboardContainer />,
  document.getElementById('root')
);