title: React Array of Child Components not re-rendering even with setState() and unique keys when made with Array.map()
body: <p><a href="https://i.stack.imgur.com/WRnHw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WRnHw.png" alt="UI image" /></a>
  So, You see that UI in above image..., I'm trying to replicate some functionality of G-Mail - Selecting multiple items or All items. When I try to <strong>select all</strong>(the purple chkbox)... my child components don't re-render checkboxes even though their state variable <code>selectedList</code> gets updated. I need to check all the boxes on <code>selectAll==true</code></p>
  <p>I feel like I'm doing something wrong with .map()... it is ensured that <code>id</code> in map is always unique and also it is the <code>key</code> attribute for child components while mapping</p>
  <p><strong>My main component</strong> <code>Table</code>:</p>
  <pre class="lang-js prettyprint-override"><code>export default function Table() {
      const [selectAll, setSelectAll] = useState(false)
      //gave a dummy id:0 beacause React is throwing Uncontrolled to controlled component error as an empty {} is nothing but undefined
      const [selectedList, setSelectedList] = useState({ id: 0 })
      console.log(selectedList)
      
      useEffect(()=&gt;{
          let newSelectedList = {}
          if(selectAll){
              dataList.forEach(ele =&gt;  newSelectedList[ele.id]=1);
          }else{
              dataList.forEach(ele =&gt;  newSelectedList[ele.id]=0);
          }
          setSelectedList(newSelectedList)
      },[selectAll])
  
      return &lt;div&gt;
          &lt;ActionBar /&gt;
          &lt;div className=&quot;overflow-x-auto w-full&quot;&gt;
              &lt;table className=&quot;table w-full&quot;&gt;
                  {/* HEAD */}
                  &lt;thead&gt;
                      &lt;TableHeadingRow select selectAll={selectAll}
                          setSelectAll={setSelectAll} /&gt;
                  &lt;/thead&gt;
                  {/* BODY */}
                  &lt;tbody&gt;
                      {
                      dataList.map(data =&gt;
                          &lt;TableRow key={data.id} data={data}
                              selectedList={selectedList} setSelectedList={setSelectedList} /&gt;)
                      }
                  &lt;/tbody&gt;
                  {/* FOOT */}
                  &lt;tfoot&gt;
                      &lt;TableHeadingRow /&gt;
                  &lt;/tfoot&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  <p>In above code, <code>selectAll</code> keeps track of purple checkbox and <code>selectedList</code> is an object of all unique ids of child components as keys and 0 or 1 as values</p>
  <p>I try to render checkboxes in child components when their <code>id</code> in <code>selectedList</code> has a value <code>1</code></p>
  <p><code>selectedList</code> is passed as prop to child component</p>
  <p><strong>Child component</strong> <code>TableRow</code>(the one which doesn't re-render):</p>
  <pre class="lang-js prettyprint-override"><code>function TableRow({ data, selectedList, setSelectedList }) {
      const { id, name, branch, address, phone, mail } = data
      function handleChange() {
          setSelectedList(prev =&gt; {
              return { ...prev, [id]: 1 ^ prev[id] }
          })
      }
      return &lt;tr&gt;
          &lt;th&gt;
              &lt;label&gt;
                  &lt;input type=&quot;checkbox&quot; className=&quot;checkbox checkbox-secondary&quot;
                      checked={selectedList.id} onChange={handleChange} /&gt;
              &lt;/label&gt;
          &lt;/th&gt;
          &lt;td&gt;
              &lt;div className=&quot;flex items-center space-x-3&quot;&gt;
                  &lt;div&gt;
                      &lt;div className=&quot;font-bold&quot;&gt;{name}&lt;/div&gt;
                      &lt;div className=&quot;text-sm opacity-50&quot;&gt;{branch}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;{address}&lt;/td&gt;
          &lt;td&gt;{phone}&lt;/td&gt;
          &lt;td&gt;{mail}&lt;/td&gt;
      &lt;/tr&gt;
  }
  </code></pre>
  <p>Ignore <code>handleChange</code> in child component, it's for singly selecting elements and works fine... It isn't related to this question anyways</p>
  <p>On <code>console.log(selectedList)</code>, I do get updated values of all ids to 1 but state of child components remain unchanged. Please help me figuring this out and let me know what I'm doing wrong. Any help is massively appreciated!</p>