title: React Error: Rendered more hooks than during the previous render. when using useState and map
body: <p>I have React code which fetch from my Api posts and displays it.</p>
  <p>when I tried to display the posts with <code>map</code>, I used <code>useState</code> inside the <code>map</code> and I got this error:</p>
  <p><code>Error: Rendered more hooks than during the previous render.</code></p>
  <p>When I deleted the useState it worked.</p>
  <p>This is my code</p>
  <pre><code>import {useState,useContext,useEffect} from &quot;react&quot;
  import {username} from &quot;./username&quot;
  
  const PostDisplay = (post) =&gt; {
  
    const [try, setTry] = useState(&quot;&quot;)
  
    return (
      &lt;div&gt;Hello&lt;/div&gt;
    );
  
  
  }
  
  
  function Home(){
  
      const [loggedIn,setLoggedIn] = useContext(username)
  
      const [posts, setPosts] = useState([])
  
      useEffect(() =&gt; {
        fetch(&quot;/posts&quot;)
        .then((response) =&gt; response.json())
        .then((data) =&gt; {
        setPosts(data)
        console.log(data)
        })   
      }, [])
  
        
  
  if(loggedIn){
      return (
      &lt;div align=&quot;center&quot;&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;div&gt;
        {posts.map(PostDisplay)}
        &lt;/div&gt;
      &lt;/div&gt;
      )
  }
  
  else{
      return (
          &lt;div&gt;
            &lt;h1 align=&quot;center&quot;&gt;You are not logged in!&lt;/h1&gt;
          &lt;/div&gt;
          )
  }
  
  }
  
  export default Home
  </code></pre>
  <p>please help me.</p>