React Multiple Checkboxes Example

By Hardik Savani | May 29, 2020 | Category : React JS


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



Tags : React JS


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: