title: React all comment options appear by one click
body: <p>i have this code where I'm looping <code>post</code> array to extract <code>comments</code></p>
  <pre><code>
  
    const [commentOptions, setCommentOptions] = useState(false);
  
     return(
  ...
  
          {post.comments.map((comment) =&gt; (
            &lt;div className=&quot;comments&quot; key={comment._id}&gt;
              &lt;div className=&quot;commentUserImageAndUsername&quot;&gt;
                &lt;img
                  className=&quot;commentUserImg&quot;
                  src={
                    comment.userId === users._id
                      ? users.profileImg || `${PF}/profile.jpg`
                      : null
                  }
                  alt=&quot;comment user &quot;
                /&gt;
                {comment.userId === users._id ? users.firstname : null}
              &lt;/div&gt;
              &lt;div className=&quot;commentBody&quot;&gt;{comment.body}&lt;/div&gt;
              {user._id === comment.userId ? (
                &lt;div
                  className=&quot;commentOptionsMark&quot;
                  onClick={() =&gt; setCommentOptions(!commentOptions)}
                &gt; - &lt;/div&gt;
              ) : null}
              {commentOptions ? (
                &lt;div className=&quot;commentOptions&quot;&gt;
                  &lt;div className=&quot;deleteComment&quot;&gt;Delete&lt;/div&gt;
                  &lt;div className=&quot;editComment&quot;&gt;Edit&lt;/div&gt;
                &lt;/div&gt;
              ) : null}
            &lt;/div&gt;
          ))}
  ...
  )
  </code></pre>
  <p>for every <code>comment</code> i have the <code>hyphen</code> mark <code>-</code>, if i click it, it will set the <code>commentOptions</code> state to true, therefore the <code>commentOptions div</code> will appear, which contains 2 options <code>delete comment</code> and <code>edit comment</code>, the problem with this is that if i click the <code>hyphen mark</code> for one comment, the <code>commentOptions div</code> will appear for every comment, like if there are 5 comments and every comment has its own options, i can control the appearance of <code>commentOptions div</code> for every comment by just one click, this is not what i want, i want to show one div for every comment <code>hyphen -</code> on click, not all of them at once, like every comment on its own, how to fix that?</p>