title: How to open specific post dropdown menu without effecting the others?
body: <p>I have data that I am looping through and I have a slight issue with a dropdown menu. Whenever I click the dropdown button for a single post all the other posts open. And I don't know to solve it.</p>
  <p><strong>Here is the React code</strong></p>
  <pre><code>const Post = () {
  const [open, setOpen] = useState(false)
  return(
    {posts.map((post) =&gt; {
            return (
              &lt;div className=&quot;card&quot; key={post.postId}&gt;
                &lt;div className=&quot;card-header&quot;&gt;
                  &lt;div className=&quot;card-header__avatar&quot;&gt;
                    &lt;img
                      src=&quot;https://source.unsplash.com/user/erondu/40x40&quot;
                      alt=&quot;&quot;
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;card-header__username&quot;&gt;
                    &lt;span&gt;
                      &lt;strong&gt;
                        {post.firstname} {post.lastname}
                      &lt;/strong&gt;
                    &lt;/span&gt;
                    &lt;br /&gt;
                    &lt;span&gt;
                      &lt;small&gt;{date}&lt;/small&gt;
                    &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div
                    className=&quot;card-header__moreBtn&quot;
                    onClick={() =&gt; setOpen(!open)}
                  &gt;
                    &lt;img src={More} alt=&quot;&quot; /&gt;
                    {open &amp;&amp; ( ------&gt; here is where the problem comes
                      &lt;div class=&quot;dropdown-wrapper&quot;&gt;
                        &lt;ul class=&quot;dropdown-menu&quot;&gt;
                          &lt;li class=&quot;dropdown-menu__item&quot;&gt;
                            &lt;Link href=&quot;#d&quot; onClick={deletePost}&gt;Edit&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;dropdown-menu__item&quot;&gt;
                            &lt;Link className=&quot;dropdown-menu__item__link&quot; onClick={deletePost}&gt;Delete&lt;/Link&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                    )}
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;postDescription&quot;&gt;
                  &lt;p&gt;{post.postDescription}&lt;/p&gt;
                &lt;/div&gt;
                &lt;div className=&quot;imgPost&quot;&gt;
                  &lt;img src={post.image} alt=&quot;&quot; /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            )
          })}
    )
  }
  </code></pre>
  <p><strong>Here is a picture</strong><br/>
  <a href="https://i.stack.imgur.com/Ea98i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ea98i.png" alt="image of that shows how when clicked the dropdown menu for a specific post all of the other effects" /></a></p>
  <p>Any help will suffice and I appreciate your time.</p>