How to setState for react useState hook, array of objects? - reactjs

Question

Here, using an array I have mapped the input boxes, and the value which has entered in that array should be stored in an usestate hook and on click of submit button it should console the array of objects. How to acheive this? Thank You.
const AddCheckPoint = ({ master }) => {
const [addChecklist, setAddChecklist] = useState([])
const [addChecklistValues, setAddChecklistValues] = useState({})
const submit = () => {
setShow(false)
console.log(JSON.stringify(addChecklist))
}
const getFormDetails = (val, id) => {
setAddChecklistValues(prevState => ({
...prevState,
ch_id: id,
value: val
}));
setAddChecklist(prevArray => [...prevArray, addChecklistValues])
}
return (
<>
<Row><Col><b>SLno</b></Col><Col><b>Checkpoint</b></Col><Col><b>Value</b></Col></Row>
{master && master.map((r, i) => {
return (<Form.Group key={i} className="mb-3" controlId={i}>
<Row><Col><Form.Label>{r.slno}</Form.Label></Col><Col><Form.Label>{r.checkPoint}</Form.Label></Col><Col><Form.Control type="text" placeholder="Enter Username" onChange={e => getFormDetails(e.target.value, r._id)} /></Col></Row>
</Form.Group>)
})}
<Button variant="primary" onClick={submit}>Submit</Button>
</>
);
}
export default AddCheckPoint
And the prop "master" looks like the follows
[
{
"_id": "61028558b45073399077becd",
"slno": "A1",
"checkPoint": "Position of adaptor CAT",
"cellName": "PC - 1",
"createdAt": "2021-07-29T10:39:20.902Z",
"updatedAt": "2021-07-29T10:39:20.902Z",
"__v": 0
},
{
"_id": "61028567b45073399077becf",
"slno": "A2",
"checkPoint": "Flush height of Adaptor CAT position",
"cellName": "PC - 1",
"createdAt": "2021-07-29T10:39:35.752Z",
"updatedAt": "2021-07-29T10:39:35.752Z",
"__v": 0
}
]

Answer 1

Just add simple by create a new value and pass it into setAddChecklistValues and setAddChecklist
const getFormDetails = (val, id) => {
const newValue = {
ch_id: id,
value: val,
};
setAddChecklistValues(newValue);
setAddChecklist((prevArray) => [...prevArray, newValue]);
};

Answer 2

Here as you are using onchange u must use debouncing technique to get correct the array of the objects. Refer Following url:
https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript or you can replace below function in your code :
const getFormDetails = (val, id) => {
setAddChecklistValues((prevState) => ({
...prevState,
ch_id: id,
value: val
}));
setAddChecklist((prevArray) => {
const k = prevArray.filter((e) => {
return e.ch_id === addChecklistValues.ch_id;
});
if (k.length > 0) {
prevArray.map((e) => {
if (e.ch_id === addChecklistValues.ch_id) {
e.value = addChecklistValues.value;
}
return e;
});
return prevArray;
}
return [...prevArray, addChecklistValues];
});
};