How to Get Multiple Checkboxes Value in React JS?

This is a short guide on how to get all checked checkbox value in react js. i explained simply about how to get value from multiple checkbox to array in react. you can see how to get multiple checkbox value in react js. I’m going to show you about handling multiple checkboxes in react. Let's see bellow example multiple checkboxes in react example.

Sometime we need to add multiple checkboxes for use chooies like we can give option to choose for fruits that like user and he will select multiple from list. so if you need to add multiple checkboxes in react js then i will show how to can use multiple checkbox in react.

In this example, we will take one categories array with "PHP", "Laravel" etc. and simply using map loop display dynamic multiple checkbox. When user will select any checkbox then we will store that info to "checkedItems" variable. after when you submit form then you can get selected checkbox vaules.

So, let's see bellow preview and example code:

Example Code:

import React, { Component } from 'react';
import { render } from 'react-dom';
       
class App extends Component {
  constructor() {
    super();
    this.state = {
      categories: [
        {id: 1, value: "PHP"},
        {id: 2, value: "Laravel"},
        {id: 3, value: "Angular"},
        {id: 4, value: "React"}
      ],
      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>React Multiple Checkbox Example - HDTuto.com</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'));

Output:

checkedItems: Array[3]
0: Array[2]
0: "1"
1: true
1: Array[2]
0: "3"
1: true
2: Array[2]
0: "4"
1: true

I hope it can help you...