How to Add Object to Array State in ReactJs?

Question

I have this array of objects state, and it is working fine. I need add another object to it dynamically.

const [productData, SetProductData] = useState({
    sizes: [
        {id: 2, value: 'Small', isActive: false},
        {id: 2, value: 'Medium', isActive: false},
        {id: 2, value: 'Large', isActive: true},
        {id: 2, value: 'X Large', isActive: false},
        {id: 2, value: 'XX Large', isActive: false}
    ]
})

I tried to do it like this, but it is not working

const addObjectToArray = obj => {
    SetProductData(current => [...current, obj]);
};

addObjectToArray( {id: 3, value: 'XXX Large', isActive: true} )

I also need to update it dynamically

dbuchet · Accepted Answer · 2023-01-13 15:11:11Z

2

You need to keep the same structure in your state. You had an object, and you're changing it to an array. So


const addObjectToArray = obj => {
  SetProductData(current => ({
    ...current,
    sizes: [...current.sizes, obj]
  }));
};

addObjectToArray( {id: 3, value: 'XXX Large', isActive: true} )

answered Jan 13, 2023 at 15:11

dbuchet

1,6511 gold badge7 silver badges7 bronze badges

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

1 Comment

dbuchet Over a year ago

You're welcome. You can flag the answer as correct :)

Collectives™ on Stack Overflow

How to Add Object to Array State in ReactJs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related