Pushing objects in an array only returns last object pushed in react

Question

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>
    );
  }

Ankit Agarwal · Accepted Answer · 2022-02-01 14:14:44Z

3

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]));
};

answered Feb 1, 2022 at 14:14

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zenixo Over a year ago

It's work. Thank you very much, sir...If I want to delete some array, How can I do this with this function...Can you help me with that too? I am still a student and still learning things. Thank you very much for your time, sir.

Ankit Agarwal Over a year ago

@Zenixo If you want to remove then use filter method on that array "variant" and remove that particular item using the condition. Please explore more on "filter" and you will know it.

Tushar Shahi · Accepted Answer · 2022-02-01 14:23:49Z

1

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.
    };

answered Feb 1, 2022 at 14:23

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Comments

I am L · Accepted Answer · 2022-02-01 14:44:25Z

1

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]);

edited Feb 1, 2022 at 14:44

answered Feb 1, 2022 at 14:35

I am L

4,6806 gold badges38 silver badges55 bronze badges

Collectives™ on Stack Overflow

Pushing objects in an array only returns last object pushed in react

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related