React Material Ui Dialog not Displaying Correct Values

Question

I am trying to play with react material ui dialog boxes and I noticed a problem or maybe I am doing it wrong. I've an object a and when I click on the a button in list, it should display the respective id number but it is always displaying the id number of the last id,index instead, what is the issue? Is it because i am calling them in a loop and all three dialogue boxes are being called at the same time? what should I do to basically show the respective id with every button. ...

export default function AlertDialog() {
  const [open, setOpen] = React.useState(false);
  
  const a = [{ id: 1 }, { id: 2 }, { id: 3 }];

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <List>
        {a.map(({ id }, index) => {
          return (
            <>
              <ListItem button onClick={handleClickOpen}>
                {id}
              </ListItem>
              <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
              >
                <DialogTitle id="alert-dialog-title">{id}</DialogTitle>
                <DialogContent>
                  <DialogContentText id="alert-dialog-description" />
                </DialogContent>
              </Dialog>
            </>
          );
        })}
      </List>
    </>
  );
}

... my sample https://codesandbox.io/s/material-demo-k5s8k?file=/demo.js

Answer 1

All 3 dialogs are being opened, because you are controlling all 3 of them using the same open variable. The last dialog is just the one on top. If you look at the DOM via the browser developer tools you will see that all 3 are there.

You can fix this by managing the open state in a way that allows you to tell which id is open.

One way is to set into state the id of the dialog that is open:

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { List, ListItem } from "@material-ui/core";

export default function AlertDialog() {
  const [openId, setOpenId] = React.useState(null);
  const a = [{ id: 1 }, { id: 2 }, { id: 3 }];
  const handleClickOpen = id => {
    setOpenId(id);
  };

  const handleClose = () => {
    setOpenId(null);
  };

  return (
    <>
      <List>
        {a.map(({ id }, index) => {
          return (
            <>
              <ListItem button onClick={() => handleClickOpen(id)}>
                {id}
              </ListItem>
              <Dialog
                open={openId === id}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
              >
                <DialogTitle id="alert-dialog-title">{id}</DialogTitle>
                <DialogContent>
                  <DialogContentText id="alert-dialog-description" />
                </DialogContent>
              </Dialog>
            </>
          );
        })}
      </List>
    </>
  );
}