Dynamically show information on a modal

Question

I have an object called "staff". The staff is then mapped to show all of the staff users and render a list. I need to somehow, get the name of the staff I want to deactivate, and show it in a modal. The code:

const [staff, setStaff] = useState([]);

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

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

const getStaff = async () => {
  try {
    const r = await apiClient.get(
      endpoints.businessUsersDemographics(idBusiness)
    );
    if (r.data) {
      const rawUsers = r.data.filter((d) => d.ic_active === true);
      const staff = rawUsers.filter(
        (u) => u.cd_user_type === userType["staff"]`enter code here`
      );

      setStaff(staff);
    }
  } catch (err) {
    console.log(err);
  }
};

return (
  <>
    {staff.length > 0 &&
      staff.map((u) => (
        <UserContainer key={u.id_user}>
          <UserName>
            {u.ds_firstname} {u.ds_lastname}
          </UserName>
          <UserInfo>{u.ds_mail}</UserInfo>
          <UserInfo>{u.ds_title}</UserInfo>
          <EditIcon
            onClick={() => handleEditUser(u)}
            className={classes.icon}
          />
          <ClearIcon
            className={`${classes.icon} ${classes.delete}`}
            onClick={handleOpen}
          />
        </UserContainer>
      ))}
    <Modal
      aria-labelledby="transition-modal-title"
      aria-describedby="transition-modal-description"
      className={classes.modal}
      open={open}
      onClose={handleClose}
      closeAfterTransition
      BackdropComponent={Backdrop}
      BackdropProps={{
        timeout: 500,
      }}
    >
      <Fade in={open}>
        <div className={classes.continueModal}>
          <p>You’re deactivating the following user from the business.</p>
          <UserName>No idea how to show the staff's name</UserName>
          <p>Would you like to continue?</p>
          <Button
            variant="contained"
            color="primary"
            type="submit"
            style={{
              width: "10rem",
              marginTop: theme.spacing(3),
            }}
          >
            Confirm
          </Button>
          <Button
            variant="contained"
            color="primary"
            type="submit"
            style={{
              width: "10rem",
              marginTop: theme.spacing(3),
            }}
          >
            Cancel
          </Button>
        </div>
      </Fade>
    </Modal>
  </>
);

I'm not sure how to render the name of the staff I want to deactivate. I tried to do this: Dynamic content with React js Modal but I got a "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.". Here are some screenshots of the UI:

The list of users I got from mapping the staff object

The modal where I should show the names

How could I do so? I'm completely confused. Thanks!

score 0 · Accepted Answer · answered Oct 09 '20 at 22:36

I would start with a falsey open state value.

const [open, setOpen] = useState(null);

Convert your open/close handlers to take a user object.

const handleOpen = (user) => () => {
  setOpen(user);
};

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

Pass the appropriate user object when handleOpen is invoked. (Notice I've written the open handler to be a curried function)

{staff.length > 0 &&
  staff.map((u) => (
    <UserContainer key={u.id_user}>
      ...
      <ClearIcon
        ...
        onClick={handleOpen(u)} // <-- pass user object
      />
    </UserContainer>
  ))}

Coerce the open state value to a boolean and access the saved user object for name display.

<Modal
  ...
  open={!!open}
  ...
>
  <Fade in={!!open}>
    <div className={classes.continueModal}>
      ...
      <UserName>
        {open.ds_firstname} {open.ds_lastname} // <-- access the user from open state
      </UserName>
      <p>Would you like to continue?</p>
      ...
    </div>
  </Fade>
</Modal>

At this point, the variable name open doesn't really express what the value is that it represents. I suggest something more informative like const [selectedUser, setSelectedUser] = useState(null);. Just change all the references accordingly.

Thank you soooooo much :D I did it and it actually worked! – Florencia Vilchez Acosta Oct 22 '20 at 23:09 — Florencia Vilchez Acosta, Oct 22 '20 at 23:09

Dynamically show information on a modal

1 Answers1