To count the number of checkboxes that are checked in a React JS application, you can maintain a state that keeps track of the checked checkboxes. Here's a simple example to demonstrate this:
1. First, create a new React component that renders multiple checkboxes and maintains their checked state:
import React, { useState } from 'react';
const CheckBoxList = ({ checkboxes }) => {
const [checkedState, setCheckedState] = useState(
new Array(checkboxes.length).fill(false)
);
const handleOnChange = (position) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
setCheckedState(updatedCheckedState);
};
return (
<div>
{checkboxes.map((item, index) => (
<div key={index}>
<label>
<input
type="checkbox"
checked={checkedState[index]}
onChange={() => handleOnChange(index)}
/>
{item}
</label>
</div>
))}
</div>
);
};
export default CheckBoxList;
2. Next, create a parent component that uses the CheckBoxList
component and counts the checked checkboxes:
import React from 'react';
import CheckBoxList from './CheckBoxList';
const App = () => {
const checkboxes = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
return (
<div>
<h1>Checkboxes Example</h1>
<CheckBoxList checkboxes={checkboxes} />
</div>
);
};
export default App;
3. Modify the App
component to count the checked checkboxes by lifting the state up from the CheckBoxList
component:
import React, { useState } from 'react';
import CheckBoxList from './CheckBoxList';
const App = () => {
const checkboxes = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
const [checkedState, setCheckedState] = useState(
new Array(checkboxes.length).fill(false)
);
const handleCheckboxChange = (index) => {
const updatedCheckedState = checkedState.map((item, idx) =>
idx === index ? !item : item
);
setCheckedState(updatedCheckedState);
};
const countCheckedCheckboxes = () => {
return checkedState.filter(Boolean).length;
};
return (
<div>
<h1>Checkboxes Example</h1>
<CheckBoxList
checkboxes={checkboxes}
checkedState={checkedState}
handleCheckboxChange={handleCheckboxChange}
/>
<p>
Number of checked checkboxes: <strong>{countCheckedCheckboxes()}</strong>
</p>
</div>
);
};
export default App;
4. Finally, update the CheckBoxList component to accept the new props:
import React from 'react';
const CheckBoxList = ({ checkboxes, checkedState, handleCheckboxChange }) => {
return (
<div>
{checkboxes.map((item, index) => (
<div key={index}>
<label>
<input
type="checkbox"
checked={checkedState[index]}
onChange={() => handleCheckboxChange(index)}
/>
{item}
</label>
</div>
))}
</div>
);
};
export default CheckBoxList;
Now, when you check or uncheck any of the checkboxes, the count of checked checkboxes will be displayed and updated accordingly.
Most Helpful This Week
How to perform computation inside expression using ternary operator?
React JS update Div content on click
Search Autocomplete
Create Functional Component using ES6 Arrow Syntax
Component displays Height and Width on window resize
How to render raw HTML content in React JS?
React JSX
Search and Filter List Records
How to create simple React Router to navigate multiple pages?
How to pass data from child component to its parent in ReactJS?
Voting System
Data Table
Check checkbox is Checked or Unchecked
How to handle events using expressions inside JSX?
React Elements
Google Map
How to build and use a custom react component from scratch?
How to render one component in another component in React JS?
Compass Clock
Bill and Discount Calculator
How to pass an Argument to a Method used inside JSX expression?
React JS get Tag Name and Inner Text on Click
Arrange Game
Glyphicon Rating Star component
How to use onChange and onClick event in React JS?
How to show hide component on Click in React JS?
Random Meme Generator
How to use function inside JSX expression?
onClick Event binding and get event name in ReactJs
Tic Tac Toe
Example of React Bootstrap Datatable
Check which Radio button is Selected or Clicked
How to use createElement in React JS?
Create React App
Form Container
Example of React JS with Material UI components
React JS onClick event handler
Calculator
How to create Functional Component?
Loop inside React JSX
Integrate Bootstrap with ReactJS Application
React Components
React Props
React JS Blog CRUD operation
How to pass properties from parent component to child component in React JS?
Carousel
Form Validation
Getting Started with React and Hello World Example
How to set property values using expression?
Working with Forms, Inputs and onChange Events in ReactJs
Weather Finder
React Static Website with Material UI theme
How to get a clicked HTML element in React?
Display JSON Data in React JS
Dice Game
Using this keyword access component properties and methods
onMouseDown and onMouseUp Event handling in ReactJs
Memory Game
Cannot call non-function <variable> error in Golang
How to use React-Bootstrap component?
How to use arrow function in React stateless components?
Embed JavaScript Expressions in JSX
Random Quote Generator