Reactjs - Controlling Multiple Checkboxes

Question

Im building a CheckAllBoxes component in Reactjs. I have a list of items

fruits = {orange, apple, grape}

A general <SelectBox /> component to display and toggle the HTML checkbox

I need to build a <Fruits /> component to list all the fruits and each of item has its own <SelectBox />

Then I need to build a <SelectAll /> component which has a <SelectBox /> and when it is checked, it will toggle all the <CheckBox /> of <Fruits />

If any fruit is unchecked again, then the <SelectAll /> should be unchecked too.

The result should look something like this:

How can I get the <SelectAll /> to control other checkboxes ?

Answer 1

Here is the quick example on how you could do it:

import React, { Component } from 'react';

export default class SelectBox extends Component {
  constructor() {
    super();

    this.handleClick = this.handleClick.bind(this);
    this.state = {
      allChecked: false,
      checkedCount: 0,
      options: [
        { value: 'selectAll', text: 'Select All' },
        { value: 'orange', text: 'Orange' },
        { value: 'apple', text: 'Apple' },
        { value: 'grape', text: 'Grape' }
      ]
    };
  }

  handleClick(e) {
    let clickedValue = e.target.value;

    if (clickedValue === 'selectAll' && this.refs.selectAll.getDOMNode().checked) {
      for (let i = 1; i < this.state.options.length; i++) {
        let value = this.state.options[i].value;
        this.refs[value].getDOMNode().checked = true;
      }
      this.setState({
        checkedCount: this.state.options.length - 1
      });

    } else if (clickedValue === 'selectAll' && !this.refs.selectAll.getDOMNode().checked) {
      for (let i = 1; i < this.state.options.length; i++) {
        let value = this.state.options[i].value;
        this.refs[value].getDOMNode().checked = false;
      }
      this.setState({
        checkedCount: 0
      });
    }

    if (clickedValue !== 'selectAll' && this.refs[clickedValue].getDOMNode().checked) {
      this.setState({
        checkedCount: this.state.checkedCount + 1
      });
    } else if (clickedValue !== 'selectAll' && !this.refs[clickedValue].getDOMNode().checked) {
      this.setState({
        checkedCount: this.state.checkedCount - 1
      });
    }
  }

  render() {
    console.log('Selected boxes: ', this.state.checkedCount);

    const options = this.state.options.map(option => {
      return (
        <input onClick={this.handleClick} type='checkbox' name={option.value} key={option.value}
               value={option.value} ref={option.value} > {option.text} </input>
      );
    });


    return (
      <div className='SelectBox'>
        <form>
          {options}
        </form>
      </div>
    );
  }
}

I'm sorry for the ES6 example. Will add ES5 example when I find more time, but I think you can get the idea on how to do it. Also you definitely want to break this down into 2 components. Then you would just pass your options as props to the Child component.