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!

CodePudding user response：

You have an array and not an object. Your statement

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

is doing two things:

1. mutating the state by doing push(). Which is not the react way.
2. 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

CodePudding user response：

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]

CodePudding user response：

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