How to add a field to an array of objects using useState in react

Question

I'm building an app in react native and I want a way in which I can regularly add a field to one ore all of the user data before pushing it to the database, It is an array of objects and I know the index of each object. I'm aware of object destructuring but I don't know how to go about this. In the example below, how do I add the field "hobby" and a value of "Football" to smith alone? Thanks in advance.

const [usersData, setUsersData] = useState([
  {
    name: "Jane",
    sex: "female",
    age: "20",
  },
  {
    name: "Doe",
    sex: "male",
    age: "29",
  },
  {
    name: "Smith",
    sex: "male",
    age: "24",
  },
]);

const addHobby = (index, hobby) => {
  //Adding the field here//
};

Anurag Srivastava · Answer 1 · 2022-03-08T06:18:28.420

1

Here's a way to achieve this:

const addHobby = (index, hobby) => {
  let temp = [...usersData] // Create a copy with the spread operator
  temp[index].hobby = hobby // Set new field
  setUsersData(temp) // Save the copy to state
}

...

addHobby(2, "Football") // 2 being known index of "Smith"

Edit: As suggested by @EmileBergeron, the spread operator creates a shallow copy only, which means the original state will still be mutated in case of object property changes. A more react friendly approach would be to use .map()

const addHobby = (index, hobby) => {

  // Create a copy using .map()
  const temp = usersData.map((data, idx) => {
    let tempData = {...data} // Copy object
    if(idx === index) tempData.hobby = hobby // Set new field
    return tempData
  }) 
  
  setUsersData(temp) // Save the copy to state
}

edited Mar 08 '22 at 06:18

answered Mar 07 '22 at 16:54

Anurag Srivastava

14,077
4
33
43

`temp[index].hobby = hobby` mutates the current state. – Emile Bergeron Mar 07 '22 at 16:58
How's that, if `temp` is created using the `...` operator? – Anurag Srivastava Mar 07 '22 at 16:59
1

It creates a shallow copy of the array, but you're still accessing the same objects that are in the state currently. – Emile Bergeron Mar 07 '22 at 17:00
Thanks @EmileBergeron, Let me give it a try. – Johndev247 Mar 07 '22 at 17:03
1

Thanks @EmileBergeron, It worked for me. I really appreciate – Johndev247 Mar 07 '22 at 17:18
The edited version updates the array without mutating the current state, which is good, though it does unnecessarily copy every objects of the array when only one needs to be cloned. – Emile Bergeron Mar 08 '22 at 16:19

How to add a field to an array of objects using useState in react

1 Answers1