I’ve got a table of users. For each user I’d like the ability to popup a dialog to be able to edit the data for the user. The basic structure currently looks like:

{
  header: 'Edit User',
  cell: (cell) => {
    return (
      <>
        <SimpleFormDialog dialogOpen={open}
                          onClose={handleClose}
                          firstName={cell.row.original.firstName}
                          lastName={cell.row.original.lastName}
                          email={cell.row.original.email}
                          enabled={cell.row.original.enabled}
        />
        <IconButton aria-label="edit">
          <EditOutlined onClick={handleClickOpen} />
        </IconButton>
      </>
    );
  }
},

The SimpleFormDialog looks like:

const SimpleFormDialog = ({ onClose, dialogOpen, firstName, lastName, email, enabled }:
                            { onClose: () => void;
                              dialogOpen: boolean;
                              firstName?: string;
                              lastName?: string;
                              email?: string;
                              enabled?: boolean;
                            }) => {

  const handleClose = () => {
    onClose();
  };

  return (
    <React.Fragment>
      <Dialog

 ...

The challenge I’m having is that my SimpleFormDialog is now sharing the boolean “open” across all instances. In the process, there are inconsistencies in opening. Additionally, only information for the last user is populated into the dialog.

My ReactJS with MUI experience is incredibly weak at best. In my way of thinking the button onClick should do something equivalent to a new Dialog(parameters) and have that take care of everything. I’m struggling to think in the proper way to handle this. I started to go down the path of an array of booleans for open but quickly got myself wrapped around the axle on that.

For reference, I’ve tried material-ui-confirm but I need a form and that library seems most suited for “Are you sure” types of dialogs.

Can someone point me in the right direction? Multiple other programming languages and environments have not beaten me but ReactJS / Typescript are sure doing a job on me.