title: Multidimensional state update in reactjs
body: <p>I am working with a complex state object in reactjs and I am unable to update a particular item of the state.</p>
  
  <pre><code>state = {
      order: {
        jobs: [
          {
            id: "1",
            jobId: "31147-02",
            services: [
              {
                id: 18,
                price: "100",
              },
              {
                id: 19,
                price: "100",
              },
              {
                id: 65,
                price: "3200",
              },
              {
                id: 87,
                price: "1800",
              },
              {
                id: 88,
                price: "1350",
              },
              {
                id: 89,
                price: "1350",
              },
            ],
          },
          {
            id: "2",
            jobId: "31147-02",
            services: [
              {
                id: 45,
                price: ""
              },
              {
                id: 41,
                price: "",
              },
              {
                id: 28,
                price: "",
              },
            ],
          },
        ],
      },
    };
  </code></pre>
  
  <p>And trying to handle delete functionality </p>
  
  <p>Following code of is receiving the index of JOB and the object of service which needs to be removed from the state to perform delete functionality.</p>
  
  <pre><code>handleJobServiceDelete = (jobId, service) =&gt; {
      let jobs = [...this.state.order.jobs[jobId].services];
      jobs = jobs.filter((s) =&gt; s.id !== service.id);
      console.log(jobs);
      this.setState({ jobs });
  };
  </code></pre>
  
  <p>But I am unable to setState with updated service array after removing object from it.</p>