React Multiple Checkbox

In this section, we are going to learn the use of multiple checkboxes in React. We will see the use of ReachJS to get all checked values. In our below example, we will show that how we can get value from react multiple checkboxes.

Sometimes we have to set multiple checkboxes on the basis of user requirements. We can set the options to select fruits, and users can select them according to their choices. If users want to select more than one option or multiple options from the list, they can also do this. In this case, we are required to put multiple checkboxes in ReactJS. For this, the following example will help us to understand the use of multiple checkboxes in react.

In our below example, we are going to take an array of one category, which will contain React, Laravel, PHP, Angular, etc. We will show dynamic multiple checkboxes by using the map loop. We will make a variable named "checkedItems" to store the information of the checkbox, which is selected by the user. When the form is submitted by the user, they will get the values of all selected checkboxes. The example code to do this is as follows:

Example Code:

import React, { Component } from 'react';
import { render } from 'react-dom';
       
class App extends Component {
  constructor() {
    super();
    this.state = {
      categories: [
        {id: 1, value: "Angular"},
        {id: 2, value: "React"},
        {id: 3, value: "PHP"},
        {id: 4, value: "Laravel"}
      ],
      checkedItems: new Map()
    };
  
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
     
  handleChange(event) {
        var isChecked = event.target.checked;
        var item = event.target.value;
         
        this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
  }
     
  handleSubmit(event) {
    console.log(this.state);
    event.preventDefault();
  }
     
  render() {
    return (
      <div>
        <h1> Examples of Multiple Checkbox in React </h1>
  
        <form onSubmit={this.handleSubmit}>
           
          {
            this.state.categories.map(item => (
              <li>
                <label>
                  <input
                    type="checkbox"
                    value={item.id}
                    onChange={this.handleChange}
                  /> {item.value}
                </label>
              </li>
            ))
          }
           
          <br/>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
   
render(<App />, document.getElementById('root'));

When we execute the above code, we will get the following output: