Reactjs 在单击React时如何显示单个模型？

如何应用该功能，以便在单击p标记时，应仅为该p标记而不是所有其他标记打开react引导模式

我应该如何编码，以便在单击

p标记时，仅为该p标记打开一个模式，仅为单个模式打开一个模式，而不是同时打开所有模式

这是我的实时代码

导出默认函数App（）{
const[modalShowing，setModalShowing]=使用状态（false）；
常量[项目]=使用状态({
研究：[
{id:“1”，名称：“AZ”}，
{id:“2”，名称：“AX”}，
{id:“3”，名字：“AY”}，
{id:“4”，名字：“AB”}，
{id:“5”，名称：“AQ”}，
{id:“6”，名称：“AE”}
]
});
常量handleModel=（）=>{
setModalShowing（真）；
};
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{items.stude.map（item=>(
{item.name}
setModalShowing（假）}
size=“lg”
aria labelledby=“包含模式标题vcenter”
居中的
>
项目
{item.name}
))}
);
}
不要创建多个模态，这是一种糟糕的做法。在map函数外创建一个单一模式，并使其内容动态化。在映射函数中执行
handleClick（item）}
>并将单击的项设置为状态。然后，在模式中，使用状态中设置的项。比如：

export default function App() {
  const [modalShowing, setModalShowing] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  const [items] = useState({
    stude: [
      { id: "1", name: "AZ" },
      { id: "2", name: "AX" },
      { id: "3", name: "AY" },
      { id: "4", name: "AB" },
      { id: "5", name: "AQ" },
      { id: "6", name: "AE" }
    ]
  });

  const handleModel = item => {
    setSelectedItem(item);
    setModalShowing(true);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {items.stude.map(item => (
        <div key={item.id}>
          <p onClick={() => handleModel(item)}>{item.name}</p>
        </div>
      ))}

      <Modal
            show={modalShowing}
            onHide={() => setModalShowing(false)}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                ITEMS
              </Modal.Title>
            </Modal.Header>
            <Modal.Body>{selectedItem.name}</Modal.Body>
          </Modal>

    </div>
  );
}

导出默认函数App（）{
const[modalShowing，setModalShowing]=使用状态（false）；
const[selectedItem，setSelectedItem]=useState（null）；
常量[项目]=使用状态({
研究：[
{id:“1”，名称：“AZ”}，
{id:“2”，名称：“AX”}，
{id:“3”，名字：“AY”}，
{id:“4”，名字：“AB”}，
{id:“5”，名称：“AQ”}，
{id:“6”，名称：“AE”}
]
});
const handleModel=项目=>{
setSelectedItem（项目）；
setModalShowing（真）；
};
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{items.stude.map（item=>(
handleModel（item）}>{item.name}
))}
setModalShowing（假）}
size=“lg”
aria labelledby=“包含模式标题vcenter”
居中的
>
项目
{selectedItem.name}
);
}
不要创建多个模态，这是一种糟糕的做法。在map函数外创建一个单一模式，并使其内容动态化。在映射函数中执行
handleClick（item）}
>并将单击的项设置为状态。然后，在模式中，使用状态中设置的项。比如：

export default function App() {
  const [modalShowing, setModalShowing] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  const [items] = useState({
    stude: [
      { id: "1", name: "AZ" },
      { id: "2", name: "AX" },
      { id: "3", name: "AY" },
      { id: "4", name: "AB" },
      { id: "5", name: "AQ" },
      { id: "6", name: "AE" }
    ]
  });

  const handleModel = item => {
    setSelectedItem(item);
    setModalShowing(true);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {items.stude.map(item => (
        <div key={item.id}>
          <p onClick={() => handleModel(item)}>{item.name}</p>
        </div>
      ))}

      <Modal
            show={modalShowing}
            onHide={() => setModalShowing(false)}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                ITEMS
              </Modal.Title>
            </Modal.Header>
            <Modal.Body>{selectedItem.name}</Modal.Body>
          </Modal>

    </div>
  );
}

导出默认函数App（）{
const[modalShowing，setModalShowing]=使用状态（false）；
const[selectedItem，setSelectedItem]=useState（null）；
常量[项目]=使用状态({
研究：[
{id:“1”，名称：“AZ”}，
{id:“2”，名称：“AX”}，
{id:“3”，名字：“AY”}，
{id:“4”，名字：“AB”}，
{id:“5”，名称：“AQ”}，
{id:“6”，名称：“AE”}
]
});
const handleModel=项目=>{
setSelectedItem（项目）；
setModalShowing（真）；
};
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{items.stude.map（item=>(
handleModel（item）}>{item.name}
))}
setModalShowing（假）}
size=“lg”
aria labelledby=“包含模式标题vcenter”
居中的
>
项目
{selectedItem.name}
);
}
您可以将一些信息作为参数传递给处理程序。正如我所看到的，您正在使用map函数，所以可以这样做

例如（类内组件）：


构造函数（）{
此.state={
学生：[{id:“1”，姓名：“AZ”}，{id:“2”，姓名：“AX”}]
showModal：错，
currentModalData:{}
}
}
toggleModal=（item）=>this.setState（{showModal:true，currentModalData:item}）
render（）{
返回(
{this.state.stude.map（item=>
this.renderModal（item）}>{item.name}
）}
{this.state.showmodel&&this.renderModal（）}
)
}
RenderModel=（）=>（/*您的模式代码*/）
您可以将一些信息作为参数传递给处理程序。正如我所看到的，您正在使用map函数，所以可以这样做

例如（类内组件）：


构造函数（）{
此.state={
学生：[{id:“1”，姓名：“AZ”}，{id:“2”，姓名：“AX”}]
showModal：错，
currentModalData:{}
}
}
toggleModal=（item）=>this.setState（{showModal:true，currentModalData:item}）
render（）{
返回(
{this.state.stude.map（item=>
this.renderModal（item）}>{item.name}
）}
{this.state.showmodel&&this.renderModal（）}
)
}
RenderModel=（）=>（/*您的模式代码*/）
我的代码在codesandbox上运行。在这里试试：我的代码在codesandbox上工作。请在此处尝试：