Может ли кто-нибудь дать подробное объяснение, почему что-то подобное не будет работать в React? Что происходит, так это то, что при каждом нажатии кнопки выбирается значение «имя» из последнего элемента в массиве. Таким образом, в следующем примере диалоговое окно всегда будет отображать имя «John2».

import React from "react"; import ReactDOM from "react-dom"; import { Dialog, DialogContent } from "@material-ui/core"; function Employee({ name, dialogOpen, setDialogOpen }) { const aDialog = () ={amp}gt; { return ( {amp}lt;Dialog open={dialogOpen}{amp}gt; {amp}lt;DialogContent{amp}gt;{name}{amp}lt;/DialogContent{amp}gt; {amp}lt;/Dialog{amp}gt; ); }; const handleClick = () ={amp}gt; { setDialogOpen(true); aDialog(); }; return ( {amp}lt;React.Fragment{amp}gt; {aDialog()} {amp}lt;button onClick={handleClick}{amp}gt;{name}{amp}lt;/button{amp}gt; {amp}lt;/React.Fragment{amp}gt; ); } function App() { const employeeNames = ["John", "John1", "John2"]; const [dialogOpen, setDialogOpen] = React.useState(false); return ( {amp}lt;div className="App"{amp}gt; {employeeNames.map(name ={amp}gt; ( {amp}lt;Employee name={name} dialogOpen={dialogOpen} setDialogOpen={setDialogOpen} /{amp}gt; ))} {amp}lt;/div{amp}gt; ); } const rootElement = document.getElementById("root"); ReactDOM.render({amp}lt;App /{amp}gt;, rootElement); 

Здесь все я думаю, что все три диалога как true значение проходят для всех трех диалогов. Попробуйте использовать какой-либо идентификатор для каждого имени или имя как идентификатор. т.е.

  const [dialogOpen, setDialogOpen] = React.useState(null); 

И попробуйте позвонить

 setDialogOpen(name); 

и передать истинное ложное с данной логикой

  {amp}lt;Employee name={name} dialogOpen={name===dialogOpen} setDialogOpen={setDialogOpen} /{amp}gt;