Updating array inside array in React SetState?

Question

One of the elements in state is happened to be nested array containing objects like below:

this.state = {
  department: [
    [
      {
        "name": {
          "firstName": "John",
          "lastName": "Joestar"
        },
        "age": 29
      },
      {
        "name": {
          "firstName": "George",
          "lastName": "Thomas"
        },
        "age": 24
      }
    ],
    [
      {
        "name": {
          "firstName": "Mary",
          "lastName": "Jane"
        },
        "age": 40
      }
    ]
  ]
}

Now suppose I need to update the firstName at department[0][0].name.firstName to Joseph. What is the correct way to update firstName using setState w/o compromising efficiency?

What have you tried? Is there a specific performance problem you're trying to solve? — jonrsharpe, Jan 19 '20 at 17:44
"compromising efficiency" it is opinioned, you need to tell us what you think efficiency in updating state means — Dennis Vash, Jan 19 '20 at 17:53
Does this answer your question? [How to update nested state properties in React](https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react) — Christian Fritz, Jan 19 '20 at 17:56
Initially, I cloned the whole object, make that small change then set the whole object back using setState. But that doesn't seems optimized way. Then, i referred other stack overflow questions, they include update using `prevState` in `setState` update, under this method, i am able to update array of objects, but i am unable to figure out nested array of objects update. — Desmnd2, Jan 19 '20 at 18:03
Hi, @ChristianFritz, I already referred the link you mentioned. They include update of objects. I couldn't find the same to update nested arrays. — Desmnd2, Jan 19 '20 at 18:05

score 0 · Answer 1 · answered Jan 19 '20 at 17:59

You have to find the object, assign it to a variable, change it and set it again. Once you have a array of objects, and pick one of them if you change the object reference will be found.

I'd somenthing like:

department: [
    [
      {
        "name": {
          "firstName": "John",
          "lastName": "Joestar"
        },
        "age": 29
      },
      {
        "name": {
          "firstName": "George",
          "lastName": "Thomas"
        },
        "age": 24
      }
    ],
    [
      {
        "name": {
          "firstName": "Mary",
          "lastName": "Jane"
        },
        "age": 40
      }
    ]
  ]
....
const getDataToChange = this.state.department.find(dep => dep.name.firstName === "John");

getDataToChange.name.firstName = "Joseph"

this.setState(...this.state.department);

score 0 · Answer 2 · answered Jan 19 '20 at 18:03

I think you can make a dummy or clone of your department array like this:

var departmentClone = [...this.state.department]

And set like this:

departmentClone[0].name.firstName = 'Joseph'
this.setState({department: departmentClone})

Or more small code

var department = [...this.state.department]
department[0].name.firstName = 'Joseph'
this.setState({department})

Updating array inside array in React SetState?

2 Answers2