title: Mapped data rendering multiple Material-UI Dialog components
body: <p>I'm displaying a list of users in a table. Each row has a cell which contains a button to delete the user. When the delete button is clicked I'm rendering a  <a href="https://material-ui.com/components/dialogs/#alerts" rel="nofollow noreferrer">Material-UI <code>&lt;Dialog /&gt;</code> component</a> to confirm.</p>
  <p>The issue is that the map is causing 3 dialogs to be rendered and the last one is the one on top. So If I have 3 users in the array, 3 dialogs are rendered but you can only interact with the 3rd dialog (it blocks the other 2 from view).</p>
  <p>The issue is similar to <a href="https://stackoverflow.com/questions/54703943/passing-mapped-data-to-a-material-ui-modal">this one.</a></p>
  <p>Is there a way to control which dialog is opened?</p>
  <p><code>handleDeleteUser</code> is an async function making a request so I need to pass <code>id</code> and <code>links</code> to that method.</p>
  <p>I have a simplified <a href="https://codesandbox.io/s/runtime-platform-ix7ph" rel="nofollow noreferrer">codesandbox here</a>. If you try to delete user 1 or user 2, you can see that only the id and link for user 3 appear in the console.</p>
  <pre><code>const handleDeleteUser = (id, links) =&gt; {
    // this always prints the id and links for the last user in the table
    console.log(&quot;deleting user --&gt;&quot;, id);
    console.log(&quot;user delete URL&quot;, links.self);
    setOpen(false);
  };
  
  &lt;Table.Body&gt;
    {userList &amp;&amp; userList.length &gt;= 1 ? (
      userList.map(
        ({ id, attributes, links, i }, index) =&gt; {
          return (
            &lt;Table.Row key={index}&gt;
              &lt;Table.Cell textAlign=&quot;center&quot;&gt;
                &lt;Button
                  circular
                  icon
                  size=&quot;mini&quot;
                  color=&quot;red&quot;
                  type=&quot;button&quot;
                  onClick={handleClickOpen}
                &gt;
                  &lt;Icon name=&quot;delete&quot; /&gt;
                &lt;/Button&gt;
                &lt;Dialog
                  open={open}
                  onClose={handleClose}
                  aria-labelledby=&quot;alert-dialog-title&quot;
                  aria-describedby=&quot;alert-dialog-description&quot;
                &gt;
                &lt;DialogTitle id=&quot;alert-dialog-title&quot;&gt;
                  {&quot;Confirm User Delete&quot;}
                &lt;/DialogTitle&gt;
                &lt;DialogContent&gt;
                  &lt;DialogContentText id=&quot;alert-dialog-description&quot;&gt;
                    {`Are you sure you want to delete this user?`}
                  &lt;/DialogContentText&gt;
                &lt;/DialogContent&gt;
                &lt;DialogActions&gt;
                  &lt;MUIButton
                    type=&quot;button&quot;
                    onClick={handleDeleteUser.bind(
                      this,
                      id,
                      links
                    )}
                    color=&quot;primary&quot;
                  &gt;
                    Yes
                  &lt;/MUIButton&gt;
                  &lt;MUIButton
                    type=&quot;button&quot;
                    onClick={handleClose}
                    color=&quot;primary&quot;
                    autoFocus
                   &gt;
                     Cancel
                  &lt;/MUIButton&gt;
                &lt;/DialogActions&gt;
              &lt;/Dialog&gt;
  </code></pre>