title: React Hooks: Cannot read property 'map' of undefined
body: <p>by using voila with foreach I think the state has been manipulated...<br />
  So help me to find out what is the actual problem...
  like I tried to use loop which didn't worked inside the loop and know I tried with foreach and it tell that map is undefined, probably because the state is manipulated...
  Moreover, do see the console.log in the useeffect which gives me the thing that I want. But with that same logic I can't render it in the page.</p>
  <pre><code>      export default function App() {
        const [selectedUserName, setSelectedUserName] = React.useState(&quot;&quot;);
        const [tvShow, setTvShow] = React.useState(thestack);
        const [selectedTVShow, setSelectedTVShow] = React.useState(&quot;&quot;);
        useEffect(() =&gt; {
          if (selectedUserName !== &quot;&quot;) {
            setTvShow(() =&gt;
              thestack.filter((show) =&gt; show.username === selectedUserName)
            );
          }
        }, [selectedUserName]);
        useEffect(() =&gt; {
            if (selectedTVShow !== &quot;&quot;) {
            let voila = [10]
            // for(let i=0;i&lt;10;i++){ 
            setTvShow(
               voila.forEach(function (number) {thestack.filter((showme=[number]) =&gt; {return showme.sitcoms[number] === selectedTVShow})  })                 
              // thestack.filter((showme) =&gt; showme.sitcoms[2] === selectedTVShow)
              );
                // }
            }
          for(let i=0;i&lt;10;i++){console.log(thestack.filter((showme = [i]) =&gt; {return showme.sitcoms[i] === selectedTVShow}));}
          
        }, [selectedTVShow]);
        let summedArray = thestack[1].sitcoms.concat(
          thestack[2].sitcoms,
          thestack[3].sitcoms,
          thestack[4].sitcoms,
          thestack[5].sitcoms
        );
        //console.log(summedArray)
        let newsummedArray = [...new Set(summedArray)];
        //console.log(newsummedArray);
        // console.log(thestack[3].sitcoms[3]);
        let vola = newsummedArray.map((element) =&gt; {
          return element;
        });
        //console.log(vola)
        return (
          &lt;div&gt;
            &lt;select
              placeholder=&quot;Sitcoms&quot;
              onChange={(event) =&gt; setSelectedUserName(event.target.value) }
              
            &gt;
              &lt;option value=&quot;nothing&quot;&gt;Select the username&lt;/option&gt;
              &lt;option value=&quot;priyansh__8&quot;&gt;priyansh__8&lt;/option&gt;
              &lt;option value=&quot;shekhar_mandal_&quot;&gt;shekhar_mandal_&lt;/option&gt;
              &lt;option value=&quot;h28h8_00&quot;&gt;h28h8_00&lt;/option&gt;
              &lt;option value=&quot;iamneegam&quot;&gt;iamneegam&lt;/option&gt;
            &lt;/select&gt;
            &lt;span&gt; &lt;/span&gt;
            &lt;button className=&quot;reloadButton&quot; onClick={() =&gt; setTvShow(thestack)}&gt;
              Reload
            &lt;/button&gt;
            &lt;select
              placeholder=&quot;TVShow&quot;
              onChange={(event) =&gt; setSelectedTVShow(event.target.value)}
              className=&quot;TVdropdown&quot;
            &gt;
              &lt;option&gt;Choose any TV-Show&lt;/option&gt;
              &lt;option&gt;{newsummedArray[0]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[1]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[2]}&lt;/option&gt;  
            &lt;option&gt;{newsummedArray[3]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[4]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[5]}&lt;/option&gt;  
            &lt;option&gt;{newsummedArray[6]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[7]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[8]}&lt;/option&gt;  
            &lt;option&gt;{newsummedArray[9]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[10]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[11]}&lt;/option&gt;  
            &lt;option&gt;{newsummedArray[12]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[13]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[14]}&lt;/option&gt;  
            &lt;option&gt;{newsummedArray[15]}&lt;/option&gt;  &lt;option&gt;{newsummedArray[16]}&lt;/option&gt;  
            &lt;/select&gt;
      
            &lt;div className=&quot;App&quot;&gt;
              {tvShow.map((item) =&gt; (
                &lt;Square
                  key={item.id}
                  icon_six={item.icon[5]}
                  username={item.username}
                  username_link={item.username_link}
                  icon_one={item.icon[0]}
                  sitcoms_one={item.sitcoms[0]}
                  icon_two={item.icon[1]}
                  sitcoms_two={item.sitcoms[1]}
                  icon_three={item.icon[2]}
                  sitcoms_three={item.sitcoms[2]}
                  icon_four={item.icon[3]}
                  sitcoms_four={item.sitcoms[3]}
                  icon_five={item.icon[4]}
                  sitcoms_five={item.sitcoms[4]}
                /&gt;
              ))}
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
  </code></pre>