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 selection is important UI feature for standard front end development. Today i have provide you some example about multiple checkbox selection with react js using the state of react js.
- You need to Install
create-react-app
package globally by this commandnpm install -g create-react-app (npm command)
. - Download or Clone the Project from
https://github.com/tariqulislam/react-multi-select-checkbox.git
. - Run command on
terminal
orcmd
npm install
oryarn install
. - Then Run command
npm start
oryarn start
- To Access Parent Checkbox Component
onChange
event, example code
filehandleAllChecked = (event) => {
let fruites = this.state.fruites
fruites.forEach(fruite => fruite.isChecked = event.target.checked)
this.setState({fruites: fruites})
}
- To Access Chield Checkbox Component
onChange
event, example code
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})
}
All the Code and information of this repository free to access. This will be licence under MIT
. User can modified it and share it and if he/she want to contribute it, Feel to free to contribue.