How to add and update objects into array of objects?

Question

I am trying to dynamically add an object to an array of objects, I have been trying to Destructuring the main object but it adds a number to the end of the parent array. This is what I have:

const [data, setData] = useState ([
 {
     _id:1,
     firstName:'Leo',
     lastName:'Miller',
     telephone:'+569273829',
     mail:'[email protected]',
     work:[
          {_id:1, startWorkDate:'01/01/2015', endWorkDate:'01/02/2017', work:'description...'},
          {_id:2, startWorkDate:'01/01/2018', endWorkDate:'01/02/2020', work:'description...'}
     ]
}];

I generate dynamically this object:

const value = {_id:3, startWorkDate:'01/01/2018', endWorkDate:'01/02/2020', work:'description...'}

I need to add it into data.work and after that update only the description of work._id[3]

I try with this function

const addNewWork = (value) => {
        let copyData = [...data, data[0].workExperience.push(value)]
        return setData(copyData)
    }

but for some reason doesn't add correctly the object. Help please!

Tushar Shahi · Accepted Answer · 2021-10-05 15:29:25Z

You have an array and not an object. Your statement

 let copyData = [...data, data[0].workExperience.push(value)]

is doing two things:

mutating the state by doing push(). Which is not the react way.
creating a new array. Also adding a new item to the array, but that is the new length of data[0].workExperience.

The return value of Array.prototoype.push is:

The new length property of the object upon which the method was called.

What you have to do is:

Make a copy of the array. Can use ... (spread operator) here.
Make a copy of the array object you want (first index). Try to add the object to its specific property workExperience.

const addNewWork = (value) => {
       let newData = [...data];
      let newWorkExperienceArray = 
       [...data[0].workExperience,value];
      
       let newDataFirstObject = {...data[0], workExperience : newWorkExperienceArray};
        newData[0] =  newDataFirstObject;
        return setData(newData)
    }

You can also update the property. I didn't find the relevant code in your question as to what I have to update so I didn't update anything in the third workExperience object.

EDIT: It seems in your code the property name is work and not workExperience. Please confirm. The above code uses workExperience, you can replace it by work if that is the case

ABDULLOKH MUKHAMMADJONOV · Accepted Answer · 2021-10-05 15:30:21Z

1

You can do this with this simple function:

const addNewWork = (value) => {
   let updatedObj = data[0];
   updatedObj.work.push(value)
   
   // updates your object each time
   let copyData = [updatedObj]
   
   // adds a new object for each call
   // let copyData = [...data, updatedObj]
   return setData(copyData)
}

Now it updates the object in your state. If you want to add a new object for each call just uncomment let copyData = [...data, updatedObj] and comment out let copyData = [updatedObj]

answered Oct 5, 2021 at 15:30

ABDULLOKH MUKHAMMADJONOV

5,3946 gold badges28 silver badges51 bronze badges

Comments

Aloiso Gomes · Accepted Answer · 2021-10-05 15:20:18Z

0

When you set state for array your setter is a quite bite different

setData(prevData => [...prevData, newItem]) // to add a single item to array

setData(prevData => newArray) // to replace entire array

answered Oct 5, 2021 at 15:20

Aloiso Gomes

8601 gold badge9 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to add and update objects into array of objects?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related