Multiple checkbox handling by React JS

React is most popular front end development framework. For our application development purpose we have build different complex web component to fullfill business requirment. Multiple checkbox is important UI feature for standard frontend development. Today i build some example about multiple checkbox with React JS.

First Install the boilerplate create-react-app to start my example projects

> npm install -g create-react-app

After that create react applcation by this command from command line

> create-react-app react-multi-select-checkbox

After finishing setup project, then i have to remove generated code from App.js and replace it with following code, which is provide below

Figure 1.1 Create the multiple check component

In Figure 1.1, First I add the state at constructor named fruites by simply add this.state = {} in constructor . fruites is the array of fruite items which is using for generate checkbox group. render is the function which is wrap with html and javascript or es6 or es7 code, and it helps browser to render react js code.

In React JS developer must return the fully qualified dom element within return statement.

Then add Chield Checkbox component with click event , which is using for create checkbox group in App component in App.js , we can discuss it later.

In CheckBox component(Dump Component or Presentational Component) , so all the porperties are comes from parent Component.

onClick Event is used for handle the checked or unchecked state when click on checkbox in checkbox group.

To Control The checkbox group I have added Check/ Uncheck All checkbox in App component in App.js file

In this code snippet, i add the virtual dom (html like syntax) which will contains Check/ Uncheck All checkbox. Then i use javascript map() function to iterate through the fruites state and return CheckBoxelement for each iteration. Pass All the properties from App component to CheckBox component by {...fruite} statement within CheckBox component. Then all the properties are accessible at CheckBox element by props argument. I modifiy css at App.css file. Then import css style to App.js by following import ./App.css styntax to App component.

After complete all the code and design, Output of the application will be

Add The Check and Check All Functionality To Application

Then i add the action handler for Check/ Uncheck All checkbox and Individual checkbox check to App component and pass it to chield component CheckBox so checkbox component can use it as properties and fire click event for Check/ Uncheck All and CheckBox.

Full code for App.js file

handleAllChecked = (event) => {
    let fruites = this.state.fruites
   
    fruites.forEach(fruite => fruite.isChecked = event.target.checked) 
  
   this.setState({fruites: fruites})
}

handleAllChecked is aarrow function, for arrow function react by default auto bind this to component , no need to bind that to constructor .

In line 2, get the fruites list from state bylet fruites = this.state.fruites statement and then use forEach() function to iterate and add the isChechecked properties true or false of fruite element. Then set state by usingthis.setState({}) function. Then function will checked or unchecked all the checkbox from checkbox group.

handleCheckChieldElement = (event) => {
   let fruites = this.state.fruites
   fruites.forEach(fruite => {
     if (fruite.value === event.target.value)
       fruite.isChecked =  event.target.checked
     })
   this.setState({fruites: fruites})
}

This function is used for check the individual checkbox from group of checkbox. The function almost like previous one, execption is, element is checked if it is matched with targeted check box checked value. So it will change the state of that individual CheckBox .I pass the function to chield component (`CheckBox.js`) by add handleCheckChieldElement as props arguments by:

<CheckBox handleCheckChieldElement={this.handleCheckChieldElement} {…fruite} />

Then access that function with following code below to CheckBox element

The full implementation code, you can find it at github link below

tariqulislam/react-multi-select-checkbox