In ReactJS how do I keep track of the state of a group of checkboxes?

Question

I am trying to keep track of which boxes are checked in my local state(you can check multiple boxes). I want to be able to check and uncheck the boxes and keep track of the ids of the boxes that are checked. I will do something with the values later. This is what I have so far:

    import React, { Component } from 'react'
    import './App.css'
    import  CheckBox  from './CheckBox'


    class App extends Component {
      constructor(props) {
        super(props)
        this.state = {
          fruits: [
            {id: 1, value: "banana", isChecked: false},
            {id: 2, value: "apple", isChecked: false},
            {id: 3, value: "mango", isChecked: false},
            {id: 4, value: "grape", isChecked: false}
          ],
          fruitIds: []
        }
      }

      handleCheckChildElement = (e) => {
        const index = this.state.fruits.findIndex((fruit) => fruit.value === e.target.value),
          fruits = [...this.state.fruits],
          checkedOrNot = e.target.checked === true ? true : false;
          fruits[index] = {id: fruits[index].id, value: fruits[index].value, isChecked: checkedOrNot};
          this.setState({fruits});
          this.updateCheckedIds(e);
        }

      updateCheckedIds = (e) => {
        const fruitIds = [...this.state.fruitIds],
            updatedFruitIds= fruitIds.concat(e.target.id);
          this.setState({updatedFruitIds});
      }

      render() {
        const { fruits } = this.state;
        if (!fruits) return;

        const fruitOptions = fruits.map((fruit, index) => {
          return (
            <CheckBox key={index}
              handleCheckChildElement={this.handleCheckChildElement}
              isChecked={fruit.isChecked}
              id={fruit.id}
              value={fruit.value}
            />
          );
        })

        return (
          <div className="App">
          <h1>Choose one or more fruits</h1>
            <ul>
            { fruitOptions }
            </ul>
          </div>
        );
      }
    }

    export default App

So basically I am able to check and uncheck the boxes, but I cannot seem to update and store the fruitIds. Here is my checkbox component also:

    import React from 'react'

    export const CheckBox = props => {
        return (
          <li>
            <input key={props.id}
              onChange={props.handleCheckChildElement}
              type="checkbox"
              id={props.id}
              checked={props.isChecked}
              value={props.value}
            />
            {props.value}
          </li>
        )
    }


    export default CheckBox

Also if you have a cleaner ways to do this than the way I am doing it, I would love to see it.

Answer 1

This is what if I were to approach it I will do. I will create a one dimensional array that holds the id's of the fruits when A fruit if clicked(checked) I will add it id to the array and when its clicked the second time I check if the array already has the id I remove it. then the presence of id in the array will mean the fruit is checked otherwise its not checked So I will do something like below

  this.state={
    fruitsIds: []
   }
  handleCheckChildElement=(id) => {
//the logic here is to remove the id if its already exist else add it. and set it back to state
   const fruitsIds = this.state.fruitsIds;
    this.setState({fruitsIds: fruitsIds.contains(id) ? fruitsIds.filter(i => i != id) : [...fruitsIds, id] })
   }

then I render the checkboxes like

    <CheckBox key={index}
     handleCheckChildElement={this.handleCheckChildElement}
     isChecked = { this.state.fruitsIds.contains(fruit.id)}
     id={fruit.id}
   />

This is because you can always use the id to get all the other properties of the fruit so there is absolutely no need storing them again. then the checkbox component should be as follows

export const CheckBox = props => {
    return (
      <li>
        <input key={props.id}
          onChange={() => props.handleCheckChildElement(props.id)}
          type="checkbox"
          id={props.id}
          checked={props.isChecked}
          value={props.value}
        />
        {props.value}
      </li>
    )
}