Reactjs 如何在react map循环中定位特定元素

我有一些我循环浏览的评论：

当我点击三个点时，我想在那里弹出一个小div，文本为“repport comment”

但当我点击其中一个按钮时，它们都会打开：

从“react icons/fa”导入{FaEllipsisV}；
导入“/styles.css”；
从“React”导入React；
常数数据=[
{
职位:1,，
id:1，
姓名：“身份证，劳动证，劳动证”，
电子邮件：“Eliseo@gardner.biz",
正文：
“赞美之词是一种伟大的精神财富，是一种现代的需要，是一种精神财富”
},
{
职位:1,，
id:2，
名称：“我们的生活是相似的”，
电子邮件：“Jayne_Kuhic@sydney.com",
正文：
“这是一个全新的世界，它是一个全新的世界\n它是一个世界性的世界\n它是一个世界性的世界\n它是一个世界性的世界\n它是一个世界性的世界
},
{
职位:1,，
id:3，
名称：“odio adipisci rerum aut animi”，
电子邮件：“Nikita@garfield.biz",
正文：
“类似于一个方面的代表性分子\n在某些情况下被认为是不公平的，甚至是不公平的赞美\n不公平的代表性分子\n不公平的，不公平的，不公平的，不公平的”
},
{
职位:1,，
id:4，
姓名：“别名odio sit”，
电子邮件：“Lew@alysha.tv",
正文：
“不允许任何人在任何情况下，在任何情况下，不允许任何人在任何情况下，在任何情况下，不允许任何人在任何情况下，在任何情况下，不允许任何人在任何情况下，在任何情况下，不允许任何人在任何情况下，在任何情况下，不允许任何人在任何情况下，在任何情况下，不允许任何人在任何情况下，在任何情况下，不允许任何人在任何情况下，不允许
},
{
职位:1,，
id:5，
名称：“vero eaque aliquid doloribus et culpa”，
电子邮件：“Hayden@althea.biz",
正文：
“非准理性\n非准理性\n非准理性\n非准理性\n非准理性\n非准理性\n非准理性\n非准理性\n非准理性\n非准理性\n非准理性\n非准理性\n非准理性\n非准理性结构
}
];
导出默认函数App（）{
const[showOptions，setShowOptions]=React.useState（false）；
返回(
{data.map（（注释，索引）=>(
{comment.name}
setShowOptions（！showOptions）}>
{显示选项(
报告这一评论
)：null}
))}
);
}

我想要的示例：

---

您可以这样做：

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>
  );
}

导出默认函数App（）{
const[showOptions，setShowOptions]=React.useState（{id:null，status:false}）；
返回(
{data.map（（注释，索引）=>(
{comment.name}
setShowOptions（{id:comment.id，状态：！showOptions.status}）}>
{showOptions.status&&comment.id===showOptions.id(
报告这一评论
)：null}
))}
);
}

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>
  );
}