Append new array of object to the current object of state React Hooks

Question

This is my current data

const [propertyData, setPropertyData] = useState({
    propertyName: '',
    contacts: [
     {
       contactName: 'Person1',
       contactNumber: 'Number1',
     },
     {
       contactName: 'Person2',
       contactNumber: 'Number2',
     },
    ]
})

What I'm trying to achieve is to add another object to contacts like this

contacts: [
     {
       contactName: 'Person1',
       contactNumber: 'Number1',
     },
     {
       contactName: 'Person2',
       contactNumber: 'Number2',
     },
     {
       contactName: 'Person3',
       contactNumber: 'Number3',
     },
    ]

What I'm doing is this

setPropertyData({
  ...propertyData,
  contacts: [{ ...propertyData.contacts, contactPerson: 'Person3', contactNumber: 'Number3', }]
})

But what it does is it's updating the current data with just the new one without the old one like this

contacts: [
     {
       contactName: 'Person3',
       contactNumber: 'Number3',
     },
    ]

I'm kind of always confused using the spread operator especially if it's an array or an object I have to to append to. Please help. Thank you!

Try `contacts: [...propertyData.contacts, {contactPerson: 'Person3', contactNumber: 'Number3'}]`. — ggorlen, Dec 01 '20 at 17:37
Does this answer your question? [Push method in React Hooks (useState)?](https://stackoverflow.com/questions/54676966/push-method-in-react-hooks-usestate) — Emile Bergeron, Dec 01 '20 at 18:02

score 1 · Answer 1 · answered Dec 01 '20 at 17:37

1

You can use this syntax to add a new object to your array of objects :

setPropertyData({
  ...propertyData,
  contacts: [...propertyData.contacts, { contactPerson: 'Person3', contactNumber: 
            'Number3' }]
})

answered Dec 01 '20 at 17:37

VersifiXion

2,152
5
22
40

score 0 · Answer 2 · edited Dec 01 '20 at 17:40

0

setPropertyData({
  ...propertyData,
  contacts: [...propertyData.contacts, {contactPerson: 'Person3', contactNumber: 'Number3'}]
})

edited Dec 01 '20 at 17:40

codemonkey

7,325
5
22
36

answered Dec 01 '20 at 17:37

Madhuri

1,060
5
17

Append new array of object to the current object of state React Hooks

2 Answers2