React Checkbox not updating in functional component - reactjs

Question

Here is my functional component: (Link to reproduce)
import React, { useState } from "react";
import Aux from "../../../../../../hoc/Auxilary/Auxilary";
const DropDownContainer = (props) =>
{
const CheckedArray = Array(props.Data.length);
for(let i = 0; i< CheckedArray.length; i++)
CheckedArray[i] = false;
const [Selected, setSelected] = useState({
filterName: props.Name,
filterObjects: props.Data,
checked: CheckedArray.slice(),
multiSelectAllowed: false,
});
const propsStructure = props.Data.map((elem, index) => (
{
title: elem,
isSelected: false,
id: index,
key: "DropDown "+index,
checkboxStyle: {
width:"20%",
},
contentStyle: {
width: "80%",
}
}
));
const CheckBoxHandler = (index) =>
{
const newSelection = Selected;
if(!Selected.multiSelectAllowed)
{
newSelection.checked.forEach((_,ind) => (newSelection.checked[ind] = false));
}
newSelection.checked[index] = !newSelection.checked[index];
setSelected(newSelection);
console.log(Selected.checked[index]);
console.log(Selected.checked);
}
const PropDiv = propsStructure.map((elem) => {
return <div className = "CheckBoxRow" key ={elem.key}>
<input
style = {elem.checkboxStyle} type = "checkbox" checked = {Selected.checked[elem.id]}
onChange = {() => {CheckBoxHandler(elem.id)}}
/>
<div style = {elem.contentStyle}>{elem.title}</div>
</div>
});
return(
<Aux>
<div className = "Boxing">
{PropDiv}
</div>
</Aux>
);
}
export default DropDownContainer;
/*
from
props = ["a","b","c"]
to
propsStructure = [
{
title:,
isSelected:,
}
]
*/
As per my code... when I print Selected.checked the value gets updated correctly. But it doesn't reflect in checkbox of the UI. As you can see here:
Can anyone point out the way to solve this? Here is the link to reproduce. As you can see in the console, the values are updating correctly but in my checkbox, it takes the initial value which is passed at the beginning which is false in this case and so despite me trying to check it, it always remains unchecked.

Answer 1

i am change code .
import React, { useState } from "react";
const DropDownContainer = (props) => {
const CheckedArray = Array(props.Data.length);
for (let i = 0; i < CheckedArray.length; i++) CheckedArray[i] = false;
const [Selected, setSelected] = useState({
filterName: props.Name,
filterObjects: props.Data,
checked: CheckedArray.slice(),
multiSelectAllowed: false
});
const propsStructure = props.Data.map((elem, index) => ({
title: elem,
isSelected: false,
id: index,
key: "DropDown " + index,
checkboxStyle: {
width: "20%"
},
contentStyle: {
width: "80%"
}
}));
const CheckBoxHandler = (index) => {
let newSelection = { ...Selected };
newSelection.checked[index] = !newSelection.checked[index];
setSelected(newSelection);
console.log(Selected.checked[index]);
console.log(Selected.checked);
};
const PropDiv = propsStructure.map((elem) => {
return (
<div className="CheckBoxRow" key={elem.key}>
<input
style={elem.checkboxStyle}
type="checkbox"
checked={Selected.checked[elem.id]}
onClick={() => {
CheckBoxHandler(elem.id);
}}
/>
<div style={elem.contentStyle}>{elem.title}</div>
</div>
);
});
return (
<div>
<div className="Boxing">{PropDiv}</div>
</div>
);
};
export default DropDownContainer;
/*
from
props = ["a","b","c"]
to
propsStructure = [
{
title:,
isSelected:,
}
]
*/
**Working Demo:**