Scribd
Upload
72 views

Handling Multiple Checkboxes in React Js 337863fd284e

This document provides an example of how to handle multiple checkboxes in React. It defines an array of checkbox configuration objects and a reusable Checkbox component. A CheckboxContainer component renders the Checkboxes, stores the checked state in a Map in state, and updates it with a handleChange method. This allows tracking which checkboxes are checked so that information can be used elsewhere.

Uploaded by

Assalam Azeem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
72 views

Handling Multiple Checkboxes in React Js 337863fd284e

This document provides an example of how to handle multiple checkboxes in React. It defines an array of checkbox configuration objects and a reusable Checkbox component. A CheckboxContainer component renders the Checkboxes, stores the checked state in a Map in state, and updates it with a handleChange method. This allows tracking which checkboxes are checked so that information can be used elsewhere.

Uploaded by

Assalam Azeem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

× The Medium App

An app designed for readers.


OPEN IN APP

Handling multiple
checkboxes in React.js
Jakub Włodarczyk Follow
Jun 16, 2018 · 2 min read

Need a freelancer (or consultations / help) for a project or


want to build a showcase project? Hire me. Expertise: JS,
React.js, Redux, Node.js.Click and leave a message or
[email protected].

Want to get a Web Developer job having no experience? I


provide one-to-one on-line training. Click here.

I’ll show you an example implementation of how you can handle


multiple checkboxes in React.js. Let’s create some config file for
the checkboxes:

1 const checkboxes = [
2 {
3 name: 'check-box-1',
4 key: 'checkBox1',
5 label: 'Check Box 1',
6 },
7 {
8 name: 'check-box-2',
9 key: 'checkBox2',
10 label: 'Check Box 2',
11 },
12 {
13 name: 'check-box-3',
14 key: 'checkBox3',
15 label: 'Check Box 3',
16 },
17 {
18 name: 'check-box-4',
19 key: 'checkBox4',

We need a reusable Checkbox component:

1 import React from 'react';


2 import PropTypes from 'prop-types';
3
4 const Checkbox = ({ type = 'checkbox', name, checked = false, onChange
5 <input type={type} name={name} checked={checked} onChange={onChange
6 );
7
8 Checkbox.propTypes = {
9 type: PropTypes.string,
10 name: PropTypes.string.isRequired,
11 checked: PropTypes.bool,
12 onChange: PropTypes.func.isRequired,

Parameter destructuring is used in the function signature along


with some default values. So the initial state of all of the
checkboxes will be unchecked.
Let’s use the Checkbox component by wrapping it in a container:

1 import React from 'react';


2 import PropTypes from 'prop-types';
3 import checkboxes from './checkboxes';
4 import Checkbox from './Checkbox';
5
6 class CheckboxContainer extends React.Component {
7 constructor(props) {
8 super(props);
9
10 this.state = {
11 checkedItems: new Map(),
12 }
13
14 this.handleChange = this.handleChange.bind(this);
15 }
16
17 handleChange(e) {
18 const item = e.target.name;
19 const isChecked = e.target.checked;
20 this.setState(prevState => ({ checkedItems: prevState.checkedItems
21 }
22
23 render() {
24 return (
25 <React.Fragment>
26 {
27 checkboxes.map(item => (
28 <label key={item.key}>
29 {item.name}
30 <Checkbox name={item.name} checked={this.state.checkedItems

In state we have checkedItems which is a Map . This construct is

used for flexibility and convenience of just setting and getting


values. In the render method we use React.Fragment (find out
more), loop through our checkboxes config array and return the
Checkbox component for each item. In the handleChange method
we set a Map key (represented by checkbox name) with a
boolean value for a current item. This is later used in the render
method in the checked prop to determine if the checkbox should
be checked / unchecked.

State keeps the information which checkboxes were checked /


unchecked so we can use this information and e.g. dispatch
some action with the values or call some function.

Check for more inspiration here.

JavaScript React ES6 Web Development Reactjs

About Help Legal

You might also like