title: React child component using layered map methods on layered objects and arrays does not re-render when sub array is updated
body: <p>I have a component I am working on where the parent passes in a particular prop from its state. The prop is an array where each element of the array contains sub object that contains its own array.</p>
  <pre><code>import react, {useState} from 'react';
  import Posts from './Posts';
  
  function App() {
    const [posts, setPosts] = useState([
      {title: 'post1',data:{comments:['comment1', 'comment2','comment3']}},
      {title: 'post1',data:{comments:['comment1', 'comment2','comment3']}},
      {title: 'post1',data:{comments:['comment1', 'comment2','comment3']}},
    ])
  
    const deleteComment = (postIndex, commentIndex) =&gt;{
      let newPosts = [...posts];
      newPosts[postIndex].comments.splice(commentIndex, 1);
      setPosts(newPosts);
    }
  
    return (
      &lt;&gt;
        &lt;h1&gt;Parent Component&lt;/h1&gt;
        &lt;Posts posts={posts} deleteComment={deleteComment}  /&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>This prop gets passed down to a child component that then also receives a delete Comment Function. When that function is fired, the comment is deleted from state. However, when the props are updated, the child component does not re-render. My understanding is that React only looks at the top array and its top level elements to note if it re-renders, and does not catch a change at this depth in the object. What is the best way to make my child component re-render when the delete comment function is fired?</p>
  <p>import React from 'react'</p>
  <pre><code>export default function Posts({posts, deleteComment}) {
      console.log('posts: ', posts)
    return (
      &lt;&gt;
      &lt;h2&gt;Posts&lt;/h2&gt;
      {posts.map((post, postIndex)=&gt;{
          return(
              &lt;div key={post.title}&gt;
              &lt;h3&gt;{post.title}&lt;/h3&gt;
              {post.data.comments.map((comment, commentIndex)=&gt;{
                  return(&lt;&gt;&lt;p&gt;{comment}&lt;/p&gt; 
                  &lt;button onClick={()=&gt;{deleteComment(postIndex,commentIndex)}}&gt;Delete&lt;/button&gt;&lt;/&gt;)
                  
              })}
              &lt;/div&gt;)}
          )
          
      })
      &lt;/&gt;
      
    )
  }
  </code></pre>
  <p>I should also note this is a simplified example of something I'm working on for an employer, so taking comments out of data, and putting it in each post is not doable in the project I'm working on.</p>