console.clear();

const users = [

  {id: 1, name: 'A'},

  {id: 2, name: 'B'},

  {id: 3, name: 'C'},

  {id: 4, name: 'D'},

];

​

class TableRow extends React.PureComponent {

  defaultProps = {

    selected: false

  }

​

  render() {

    const { selected, id, name, handleSelect } = this.props;

    console.log(`render TableRow :: ${id} :: ${name}`);

    return (

      <tr>

        <td><input name={id} type="checkbox" checked={selected} onChange={handleSelect} /></td>

        <td>{id}</td>

        <td>{name}</td>

      </tr>

    );

  }

}

​

class Table extends React.Component {

  constructor(props) {

    super(props);

​

    this.state = {

      selected: {},

    }

  }

​

  handleSelect = (e) => {

    const selected = this.state.selected;

    selected[e.target.name] = e.target.checked;

    this.setState({ selected });

  }

​

  render() {

    return (

      <table>

        <thead>

          <tr>

            <th />

            <th>ID</th>

            <th>Name</th>

          </tr>

        </thead>

        <tbody>

          {

            users.map((user) => {

              return <TableRow key={user.id} id={user.id} name={user.name} selected={this.state.selected[user.id]} handleSelect={this.handleSelect} />;

            })

          }

        </tbody>

      </table>

    );

  }

}

​

const App = () => {

  return <Table />

}

​

ReactDOM.render(<App />, document.getElementById('app'));