How to handle the the onClick events on CheckBox in react js - reactjs

Question

I have an array called initialList the array contains three items these items have their own checkboxes, when I check on any of the items I want to push them into the list Array and at the same time remove them from the initialList array, I don't know what to write in the clickHandler function and how to render the list array
import React, { useState } from 'react'
function CheckBox3() {
const initialList = [{id: 1, name:'jim'},{id: 2, name: 'joe'},{id: 3, name: 'beth'}]
const [list, setList] = useState([])
const clickhandler = () => {
}
return (
<div>
<ol>
{initialList.map((item) => (
<li key={item.id}>{item.name}
<input type="checkbox" onClick={clickhandler} />
</li>))}
</ol>
</div>
)
}
export default CheckBox3

Answer 1

Good morning Neel.
if checkbox - there is only 2 possible values - boolean false/true.
So it's good idea to use negation here.
then U use onChange instead onClick:
<input type="checkbox" onChange={() => setChecked(!checked)}/>
I suggest to hold the actual checkbox value in state:
const [checked, setChecked] = useState()
Also if You have x checkboxes - there is need also for holding, which id of checkbox is in which state.
Or - just add checked parameter to your initialList object.
[
{id:1 checked: false}
{id:2 checked: true}
]
And also - for identifier You can add i to your map function - and in check function - reverse the value of i - id :
{initialList.map((item, i) => (
<li key={item.id}>{item.name}
<input type="checkbox" onClick={(i) =>check(i)} />
</li>))}

Answer 2

I recommend you to keep the list in the componente state, add/update the checked property every time an item is clicked:
function CheckBox3() {
const initialList = [{id: 1, name:'jim'},{id: 2, name: 'joe'},{id: 3, name: 'beth'}]
const [list, setList] = useState(initialList);
const clickhandler = ({target}) => {
const {checked, id} = target;
setList(prev => {
const clickedItem = prev.find(item => item.id.toString() === id);
clickedItem["checked"] = checked;
return [...prev];
});
}
return (
<div>
<ol>
{initialList.map((item) => (
<li key={item.id}>{item.name}
<input type="checkbox" id={item.id} onClick={clickhandler} />
</li>))}
</ol>
</div>
)
}
Then you can filter the selected items:
const selected = list.filter(item => item.checked);

Answer 3

This works perfectly for what you are trying to achieve.
What I did was I check if the checkbox is checked and if it's then push it to the list array and check if it item exists in the initialList and if it does too it should filter it out.
function CheckBox3() {
const [initialList, setIinitialList] = useState([{id: 1, name:'jim'},{id: 2, name: 'joe'},{id: 3, name: 'beth'}])
const [list, setList] = useState([])
const clickHandler = (e, item) => {
if (e.target.checked) {
setList(prevState => [
...prevState,
item
])
const newInitialList = initialList.filter((list, index) => list.id !== item.id);
setIinitialList(newInitialList)
}
}
useEffect(() => {
// Perform whatever you want to do when list changes here
console.log(list);
}, [list])
return (
<div>
<ol>
{initialList.map((item) => (
<li key={item.id}>{item.name}
<input type="checkbox" onClick={(e) => clickHandler(e, item)} />
</li>))}
</ol>
</div>
);
}