title: React setState of for deeply nested value
body: <p>I’ve got a very deeply nested object in my React state. The aim is to change a value from a child node. The path to what node should be updated is already solved, and I use helper variables to access this path within my setState.</p>
  
  <p>Anyway, I really struggle to do setState within this nested beast. I    abstracted this problem in a codepen:
  <a href="https://codesandbox.io/s/dazzling-villani-ddci9" rel="nofollow noreferrer">https://codesandbox.io/s/dazzling-villani-ddci9</a></p>
  
  <p>In this example I want to change the child’s <code>changed</code> property of the child having the <code>id</code> <code>def1234</code>.</p>
  
  <p>As mentioned the path is given: Fixed Path values: <code>Members, skills</code> and variable Path values: <code>Unique Key 1</code> (coming from <code>const currentGroupKey</code> and both Array position in the data coming from <code>const path</code></p>
  
  <p>This is my state object:</p>
  
  <pre><code>constructor(props) {
    super(props);
    this.state = { 
      group:
      {
        "Unique Key 1": {
          "Members": [
            {
              "name": "Jack",
              "id": "1234",
              "skills": [
                {
                  "name": "programming",
                  "id": "13371234",
                  "changed": "2019-08-28T19:25:46+02:00"
                },
                {
                  "name": "writing",
                  "id": "abc1234",
                  "changed": "2019-08-28T19:25:46+02:00"
                }
              ]
            },
            {
              "name": "Black",
              "id": "5678",
              "skills": [
                {
                  "name": "programming",
                  "id": "14771234",
                  "changed": "2019-08-28T19:25:46+02:00"
                },
                {
                  "name": "writing",
                  "id": "def1234",
                  "changed": "2019-08-28T19:25:46+02:00"
                }
              ]
            }
          ]
        }
      }
    };
  }
  
  handleClick = () =&gt; {
    const currentGroupKey = 'Unique Key 1';
    const path = [1, 1];
    // full path: [currentGroupKey, 'Members', path[0], 'skills', path[1]]
    // result in: { name: "writing", id: "def1234", changed: "2019-08-28T19:25:46+02:00" }
  
    // so far my approach (not working) also its objects only should be [] for arrays
    this.setState(prevState =&gt; ({
      group: {
        ...prevState.group,
        [currentGroupKey]: {
          ...prevState.group[currentGroupKey],
          Members: {
            ...prevState.group[currentGroupKey].Members,
            [path[0]]: {
              ...prevState.group[currentGroupKey].Members[path[0]],
              skills: {
                ...prevState.group[currentGroupKey].Members[path[0]].skills,
                [path[1]]: {
                  ...prevState.group[currentGroupKey].Members[path[0]].skills[
                    path[1]
                  ],
                  changed: 'just now',
                },
              },
            },
          },
        },
      },
    }));
  };
  
  render() {
    return (
      &lt;div&gt;
        &lt;p&gt;{this.state.group}&lt;/p&gt;
        &lt;button onClick={this.handleClick}&gt;Change Time&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I would appreciate any help. I’m in struggle for 2 days already :/</p>