React Multiple Checkboxes Example

Now, let's see example of how to get multiple checkbox value in react js. you can see handling multiple checkboxes in react. We will use multiple checkboxes in react example. I’m going to show you about how to get all checked checkbox value in react js. Here, Creating a basic example of how to get value from multiple checkbox to array in react.

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 - ItSolutionStuff.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...