I Know this question to be duplicated, but none of the other answers worked for me... I am trying to push objects to my array using the onChnage method. But every time my array returns the last value, not the full value. I tried so many times to fix this issue. But I can't.
function addVariantSection(data) {
const handleChecked = (id) => (e) => {
const tempData1=[];
const { checkedID } = e.target;
const vID = e.currentTarget.id.split('-', 1);
tempData1.push({ productId:itemID, variantId:vID})
setChecked((values) => ({ ...values, [id]: checkedID, }));
setVariant([...tempData1]); // variant always give the last value.
};
return (
<Grid key={data._id} container spacing={10}>
<Grid item xs={12} style={{ justifyContent: 'space-between', display: 'flex' }}>
<div>{`${data.variant1}-${data.variant2}`}</div>
{/* eslint-disable-next-line no-useless-concat */}
<Checkbox id={`${data._id}-` + `checkData`} color="primary" checked={checked[data._id]} onChange={handleChecked(data._id)} />
</Grid>
</Grid>
);
}
You are overwriting setVariant with the array - tempData1. So you need to preserve the previous value of setVariant to get the complete array you are expecting.
So do this instead
setVariant((prev) => ([...prev, ...tempData1]));
Your function will look like this:
const handleChecked = (id) => (e) => {
const tempData1=[];
const { checkedID } = e.target;
const vID = e.currentTarget.id.split('-', 1);
tempData1.push({ productId:itemID, variantId:vID})
setChecked((values) => ({ ...values, [id]: checkedID, }));
setVariant((prev) => ([...prev, ...tempData1]));
};
You are simply setting the value of variant as a new array here, which is going to have tempData1:
setVariant([...tempData1]);
Firstly you need the previous value of variant, so the callback pattern for setState is going to be useful. It gives a reliable value for the previous state always.
And using spread ..., simply append the new object at the end.
const handleChecked = (id) => (e) => {
const { checkedID } = e.target;
const vID = e.currentTarget.id.split('-', 1);
setChecked((values) => ({ ...values, [id]: checkedID, }));
setVariant((variant) => { return [...variant,{ productId:itemID, variantId:vID}]}); // variant always give the last value.
};
The answers above should be ok, but if you don't want the format where you put a function inside a setState what you can do is:
const [variant, setVariant] = useState([]);
.
.
.
setVariant([...variant, ...tempData1]);