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

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. — Ryan Cogswell
– Ryan Cogswell, Commented Jul 20, 2020 at 17:09
yes, I saw that. So, what should I do now? Using a separate component for Dialog? — death stranding
– death stranding, Commented Jul 20, 2020 at 17:13
You can see it working here. codesandbox.io/s/material-demo-loqv0?file=/demo.js — anunaki
– anunaki, Commented Jul 20, 2020 at 17:20

Ryan Cogswell · Accepted Answer · 2020-07-20 17:14:54Z

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

Collectives™ on Stack Overflow

React Material Ui Dialog not Displaying Correct Values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related