Bootstrap React Modal Component not working dynamically

Question

I am using React Bootstrap, I am using map function of javascript to loop through admins, when i loop through them all values outside the modal display the correct values from the admins array, but inside the modal it shows only one standard object from the array everytime. The id of that component is different outside the modal and inside the modal, the modal inside displays only the user with id 1 in every component or every time the modal is clicked

admins = [ {id: 5, email: "angelinsneha@gmail.com", name: "angelin", role: "admin"},
{id: 4, email: "angelinsneha14@gmail.com", name: "angu", role: "admin"},
{id: 1, email: "angelin@gmail.com", name: "aanjuu", role: "admin"}]

<div className="rgtss pb-5">
        {admins.length > 0
          ? admins.map((i) => (
              <div className="bdr">
                <div>
                  <p>{i.name} {i.id}</p>
                  <span>{i.email}</span>
                </div>
                <div className="mt-3">
                  <p>{i.role}</p>
                </div>
                <div>
                  <DropdownButton
                    id="dropdown-basic-button"
                    variant="dark"
                    title=""
                    size="sm"
                  >
                    <Dropdown.Item href={id == i.id ? "/profile" : ""}>
                      Edit
                    </Dropdown.Item>
                    {4 == i.id ? (
                      ""
                    ) : (
                      <Dropdown.Item onClick={handleShow}>Delete  {i.id}</Dropdown.Item>
                    )}
                  </DropdownButton>
                  <Modal show={show} onHide={handleClose}>
                    <Modal.Header closeButton>
                      <Modal.Title>Delete Account  {i.id}</Modal.Title> // only id 1 is displayed in modal, everytime the loop runs 
                    </Modal.Header>
                    <Modal.Body>
                      Are you sure you want to delete this team account:{" "}
                      <b>{i.name}</b>?
                    </Modal.Body>
                    <Modal.Footer>
                      <Button variant="secondary" onClick={handleClose}>
                        Close
                      </Button>
                      <Button
                        variant="danger"
                        onClick={() => handledelete(i.id)}
                      >
                        Delete
                      </Button>
                    </Modal.Footer>
                  </Modal>
                </div>
              </div>
            ))
          : ""}
</div>

I have no idea why this is happening, can you'll help me?

Answer 1

You're creating modals in a loop (in this case, 3), which is not best practice for this very problem. You'd expect that each modal has the right props depending on the item of the array, but then how does the code know which modal to display?

Your <Modal> should be outside the loop. Store a variable to know which admin to display when the modal is brought up. (It could be the index in the array, or adding a selected boolean to the admin).

When you trigger your handleShow , set this variable as well (don't forget to unset it when you're done, to prevent side-effects)

You should also use === instead of == unless it's really intended (see this SO post for more info )

EDIT: In code, it should look like this (don't copy/paste, it is untested)

const MyComponent = () => {
  
  const [adminSelected, setAdminSelected] = useState(-1);
  
  return (
    <div className="rgtss pb-5">
      {admins.length > 0
        ? admins.map((i, idx) => (
            <div className="bdr">
              <div>
                <p>
                  {i.name} {i.id}
                </p>
                <span>{i.email}</span>
              </div>
              <div className="mt-3">
                <p>{i.role}</p>
              </div>
              <div>
                <DropdownButton
                  id="dropdown-basic-button"
                  variant="dark"
                  title=""
                  size="sm"
                >
                  <Dropdown.Item href={id === i.id ? '/profile' : ''}>
                    Edit
                  </Dropdown.Item>
                  {4 === i.id ? (
                    ''
                  ) : (
                    <Dropdown.Item onClick={() => {
                      setAdminSelected(idx);
                      handleShow();}}>
                      Delete {i.id}
                    </Dropdown.Item>
                  )}
                </DropdownButton>
              </div>
            </div>
          ))
        : ''}
      <Modal show={show} onHide={() => {
        setAdminSelected(-1);
        handleClose();}}>
        <Modal.Header closeButton>
          <Modal.Title>Delete Account {i.id}</Modal.Title> // only id 1 is
          displayed in modal, everytime the loop runs
        </Modal.Header>
        <Modal.Body>
          Are you sure you want to delete this team account: <b>{i.name}</b>?
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="danger" onClick={() => handledelete(i.id)}>
            Delete
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

Note that I added the idx variable in mapping to know which admin has been clicked (-1 for none), and I'm setting it along with the handleShow method.