Getting nested array in checkbox input - node.js

Question

I am trying to get the nested array from a input value of a checkbox.
How do I handle a nested array?
These are the values:
const othersOptions = [
{procedure:'ORAL PROPHYLAXIS',price: 1000},
{procedure:'TOOTH RESTORATION',price:1200},
{procedure:'TOOTH EXTRACTION',price:800}
];
This is how I get the values from checkbox. I am guessing that value={[item]} is procedure:'ORAL PROPHYLAXIS',price: 1000 if the ORAL PROPHYLAXIS checkbox is checked
<Form>
{othersOptions.map((item, index) => (
<div key={index} className="mb-3">
<Form.Check
value={[item]}
id={[item.procedure]}
type="checkbox"
label={`${item.procedure}`}
onClick={handleChangeCheckbox('Others')}
required
/>
</div>
))}
</Form>
When I console.log the value it shows that the value is [Object object] this is the value.
const handleChangeCheckbox = input => event => {
var value = event.target.value;
console.log(value, "this is the 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);
return {...obj, chosen: newArr};
}
}
return obj;
}),
);
console.log(checked);
}
and this is how I save the nested array:
const [checked, setChecked] = useState([
{ option: 'Others',
chosen: [],
]);
The reason why I need the procedure and price is so that I can save the values to MongoDB and get the values to another page which is a Create Receipt page. I want the following procedures price to automatically display in the Create Receipt page.Thank you for the help!

Answer 1

If anyone is wondering how I fixed it.
I stringfy the input values and parsed the e.target.values
import "./styles.css";
import { Form } from "react-bootstrap";
import { useState } from "react";
import React from "react";
const othersOptions = [
{ procedure: "ORAL PROPHYLAXIS", price: 1000 },
{ procedure: "TOOTH RESTORATION", price: 1200 },
{ procedure: "TOOTH EXTRACTION", price: 800 },
{ procedure: "DEEP SCALING", price: 10200 },
{ procedure: "PTS AND FISSURES SEALANT", price: 700 },
{ procedure: "FLOURIDE TREATMENT", price: 5500 },
{ procedure: "INTERMEDIATE RESTORATION", price: 7000 },
{ procedure: "ORTHODONTICS", price: 48000 }
];
export default function App() {
const [checked, setChecked] = useState([{ option: "Others", chosen: [] }]);
console.log(checked);
const handleChangeCheckbox = (input) => (event) => {
var value = JSON.parse(event.target.value);
var isChecked = event.target.checked;
console.log("value is:", value[0].procedure);
var tempArr = { procedure: value[0].procedure, price: value[0].price };
setChecked((current) =>
current.map((obj) => {
if (obj.option === input) {
if (isChecked) {
return { ...obj, chosen: [...obj.chosen, tempArr] };
} 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;
})
);
};
return (
<Form>
{othersOptions.map((item, index) => (
<div key={index} className="mb-3">
<Form.Check
value={JSON.stringify([item])}
id={[item]}
type="checkbox"
label={`${item.procedure}`}
onClick={handleChangeCheckbox("Others")}
required
/>
</div>
))}
</Form>
);
}
RUN THE CODE HERE