score:1

Accepted answer
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkboxes: {
        cheese: false,
        lettuce: false,
        tomatoe: false
      }
    };
  }

  handleChange = e => {
    const checkboxId = e.target.id;
    this.setState({
      checkboxes: {
        ...this.state.checkboxes,
        [checkboxId]: !this.state.checkboxes[checkboxId]
      }
    });
  };

  render() {
    return (
      <div>
        {Object.entries(this.state.checkboxes).map(([key, val]) => {
          return (
            <div key={key}>
              <input
                type="checkbox"
                checked={val}
                id={key}
                onChange={this.handleChange}
              />
              <label>
                {key}
              </label>
            </div>
          );
        })}
      </div>
    );
  }
}

score:1

const Checkboxes = React.createClass({
  getInitialState: function () {
    return {
      checkbox1: false,
      checkbox2: false,
      checkbox3: false
    };
  },

  selectCheckbox: function (checkboxNr) {
    // return a callback with the checkboxNr set
    return () => {
        this.setState({
         [checkboxNr]: !this.state[checkboxNr]
        });
    }
  },

  render: function () {
    const {checkboxes1, checkboxes2, checkboxes3} = this.state;
    return (
      <div>
        <input type="checkbox" checked={checkboxes1} onChange={ this.selectCheckbox("checkbox1") } />
        <input type="checkbox" checked={checkboxes2} onChange={ this.selectCheckbox("checkbox2") } />
        <input type="checkbox" checked={checkboxes3} onChange={ this.selectCheckbox("checkbox3") } />
      </div>
    );
  }
});

score:3

render: function () {
    return (
      <div>
        {this.state.checkboxes.map((c, i) => {
             return (
              <input key={i} type="checkbox" checked={c} onChange={() => this.selectCheckbox(i)} />
           );
         })}
      </div>
    );
  }

Related Query

More Query from same tag