title: updating object inside array inside object using prevState and the useState hook
body: <p>I'd like to remove a nested object based on the <code>id</code> is equal to a passed prop. At the moment, the entire object is replaced. I'm missing something, when trying to update the state using useState probably with the way I'm looping my object?</p>
  <p><strong>UPDATE</strong>: The question was closed in response to available <a href="https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react">answers</a> for updating nested objects. This question involves arrays which I believe are part of the issue at hand. Please note the difference in nature in this question with the <code>forEach</code>. Perhaps a <code>return</code> statement is required, or a different approach to the filtering on id..</p>
  <p>my initial object looks like this:</p>
  <pre><code>{
    &quot;some_id1&quot;: [
      {
        &quot;id&quot;: 93979,
        // MORE STUFF
     
      },
      {
        &quot;id&quot;: 93978,
        // MORE STUFF
      }
    ],
    &quot;some_id2&quot;: [
      {
        &quot;id&quot;: 93961,
        // MORE STUFF
      },
      {
        &quot;id&quot;: 93960,
        // MORE STUFF
      }
    ]
  }
  </code></pre>
  <p>and I go through each item as such:</p>
  <pre><code>for (const key in items) {
          if (Object.hasOwnProperty.call(items, key)) {
              const element = items[key];
              element.forEach(x =&gt; {
                  if (x.id === singleItem.id) {
                      setItems(prevState =&gt; ({
                          ...prevState,
                          [key]: {
                              ...prevState[key],
                              [x.id]: undefined
                          }
                      }))
                  }
              })
          }
  </code></pre>