Getting and Inserting array of objects from checkboxes ReactJS - node.js

Question

I am having a trouble where an array of Objects are returning [Object object]. What could be the missing fix to get the value of product from the mapped targeted values.
this is my sample array.
const product = [{food:'BREAD',price: 6}]
this is where I map the values and get the targeted value.
<Form >
{product.map((item, index) => (
<div key={index} className="mb-3">
<Form.Check
input value={[item]}
id={[item.food]}
type="checkbox"
label={`${item.food}`}
onClick={handleChangeCheckbox('PRODUCTS')}
/>
</div>
))}
</Form>
this handles the e.target.value from checked checkboxes.
const handleChangeCheckbox = input => event => {
var value = event.target.value;
var isChecked = event.target.checked;
setChecked(current =>
current.map(obj => {
if (obj.option === input) {
if(isChecked){
return {...obj, chosen: [...obj.chosen, value ] };
}else{
var newArr = obj.chosen;
var index = newArr.indexOf(event.target.value);
newArr.splice(index, 1); // 2nd parameter means remove one item only
return {...obj, chosen: newArr};
}
}
return obj;
}),
);
console.log(checked);
}
finally, this is where I am having problems. Chosen is returning [Object object]console.log(checked).
const [checked, setChecked] = useState([
{ option: 'PRODUCTS',
chosen: [],
}
]);
What do I insert inside chosen:[] to read the following arrays. Im expecting to see
0:
food: 'bread'
price: '6'
Thank you so much for helping me!

Answer 1

Html input value prop is a string, and it's change event target value is also string.
Here you are passing an object to the value prop, which will be stringified as [Object object].
Instead, update your change handler to take item instead of event.
const handleChangeCheckbox = (input) => (value) => {
setChecked((current) => {
// Value is checked if it exists in the current chosen array
const isChecked = current.chosen.find((item) => item.food === value.food) !== undefined;
// Remove it from state
if (isChecked) {
return {
...current,
chosen: current.chosen.filter((item) => item.food === value.food),
};
}
// Add it to state
return {
...current,
chosen: [...current, value],
};
});
};
Then update your input element onChange handler, to call your handler with the item itself, instead of the event.
onClick={() => handleChangeCheckbox('PRODUCTS', item)}
I don't know what the props for your component Form.Check are. But, I would expect an input type="checkbox" to have a checked prop.
A checkbox is checked if the item is in the chosen state array.
<Form>
{product.map((item, index) => (
<div key={item.food} className="mb-3">
<Form.Check
type="checkbox"
id={item.food}
label={item.food}
checked={checked.chosen.find((chosen) => chosen.food === item.food) !== undefined}
onClick={() => handleChangeCheckbox('PRODUCTS', item)}
/>
</div>
))}
</Form>

Answer 2

Hmm, don't you need to inline your handleChangeCheckbox function? As otherwise it's just getting executed. So instead onClick={handleChangeCheckbox('PRODUCTS')} do onClick={(event) => handleChangeCheckbox('PRODUCTS', event)}.
Then your handleChangeCheckbox function will start handleChangeCheckbox = (input, event) => {...}