How to target a specific element in react map loop

Question

I have comments that i loop through:

When i click on the three dots i want there to pop a little div out with the text "repport comment".

But when i click on one of buttons they all open :

import { FaEllipsisV } from "react-icons/fa";
import "./styles.css";
import React from "react";

const data = [
  {
    postId: 1,
    id: 1,
    name: "id labore ex et quam laborum",
    email: "Eliseo@gardner.biz",
    body:
      "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
  },
  {
    postId: 1,
    id: 2,
    name: "quo vero reiciendis velit similique earum",
    email: "Jayne_Kuhic@sydney.com",
    body:
      "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
  },
  {
    postId: 1,
    id: 3,
    name: "odio adipisci rerum aut animi",
    email: "Nikita@garfield.biz",
    body:
      "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
  },
  {
    postId: 1,
    id: 4,
    name: "alias odio sit",
    email: "Lew@alysha.tv",
    body:
      "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
  },
  {
    postId: 1,
    id: 5,
    name: "vero eaque aliquid doloribus et culpa",
    email: "Hayden@althea.biz",
    body:
      "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
  }
];

export default function App() {
  const [showOptions, setShowOptions] = React.useState(false);

  return (
    <div className="App">
      {data.map((comment, index) => (
        <div key={index} className="comment-container">
          {comment.name}
          <button onClick={() => setShowOptions(!showOptions)}>
            <FaEllipsisV />
          </button>

          {showOptions ? (
            <div className="options">Report this comment</div>
          ) : null}
        </div>
      ))}
    </div>
  );
}

https://codesandbox.io/s/elated-roentgen-fbjr7?file=/src/App.js:0-2121

Example of what i'd like :

Answer 1

You can do something like this:

export default function App() {
  const [showOptions, setShowOptions] = React.useState({ id: null, status: false });

  return (
    <div className="App">
      {data.map((comment, index) => (
        <div key={index} className="comment-container">
          {comment.name}
          <button onClick={() => setShowOptions({ id: comment.id, status: !showOptions.status })}>
            <FaEllipsisV />
          </button>

          {showOptions.status && comment.id === showOptions.id ? (
            <div className="options">Report this comment</div>
          ) : null}
        </div>
      ))}
    </div>
  );
}