How to handle multiple modals in React-Bootstrap?

Question

I'm building a CRUD app using React-Bootstrap and TypeScript. My Users page is supposed to have two modals for the Create User and Edit User buttons. I have coded the edit button to open the Edit Modal, and it's working fine. I tried to use the same approach to open the Create Modal, but it opens the same edit modal instead of the create modal.

Can someone show me how I should change my code to make the Create User button work?

Here's my code.

Users.tsx

const Users = (props: Props) => {
  const [userList, setUserList] = useState<IList[]>([]);

  const [show, setShow] = useState(false);
  const [selected, setSelected] = useState(Object);
  const [updatedItem, setUpdatedItem] = useState();

  const getUsers = async () => {...};

  useEffect(() => {...}, [updatedItem]);

  const handleShow = () => setShow(true);
  const closeHandler = () => setShow(false);
  const userHandler = async (user: any) => {...};
  const updateHandler = async (user: any) => {...};
  const handleEdit = (selected: any) => {...};

  const createModal = (
    <>
      <Modal show={show} onHide={closeHandler} className="modal">
        <Modal.Header closeButton>
          <Modal.Title>Create User</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <UserForm
            userHandler={userHandler}
            closeHandler={closeHandler}
            updateHandler={updateHandler}
            formUpdate={false}
            userList={""}
          />
        </Modal.Body>
      </Modal>
    </>
  );

  const editModal = (
    <>
      <Modal show={show} onHide={closeHandler} className="modal">
        <Modal.Header closeButton>
          <Modal.Title>Edit User</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <UserForm
            userHandler={userHandler}
            closeHandler={closeHandler}
            updateHandler={updateHandler}
            formUpdate={true}
            userList={selected}
          />
        </Modal.Body>
      </Modal>
    </>
  );

  return (
    <div>
      {/* <UserForm
        userHandler={userHandler}
        closeHandler={closeHandler}
        updateHandler={updateHandler}
        userList={""}
      /> */}

      <Button variant="danger" type="button" onClick={handleShow}>
        Create User
      </Button>

      {createModal}

      {userList.length > 0 ? (
        <UserTable
          deleteHandler={deleteHandler}
          handleEdit={handleEdit}
          userHandler={userHandler}
          closeHandler={closeHandler}
          updateHandler={updateHandler}
          userList={userList}
        />
      ) : (
        ""
      )}

      {editModal}
    </div>
  );
};

export default Users;

UserForm.tsx

type Props = {
  userHandler: (user: object) => void;
  userList: any;
  updateHandler: (user: object) => void;
  formUpdate?: boolean;
  closeHandler: () => void;
};

class UserForm extends Component<Props, State> {
 
  componentDidUpdate() {...}
  addUser = (e: any) => {...};
  update = () => {...};

  render() {
    return (
      <div>
        <Form onSubmit={this.addUser}>
          ...

          <Modal.Footer>
            {this.props.formUpdate ? (
              <>
                <Button
                  variant="outline-secondary"
                  className="modal-btn"
                  onClick={this.props.closeHandler}
                >
                  Cancel
                </Button>
                <Button
                  variant="danger"
                  className="modal-btn"
                  type="button"
                  onClick={this.update}
                >
                  Edit User
                </Button>
              </>
            ) : (
              <>
                <Button
                  variant="outline-secondary"
                  className="modal-btn"
                  onClick={this.props.closeHandler}
                >
                  Cancel
                </Button>
                <Button
                  variant="danger"
                  className="modal-btn"
                  type="submit"
                  onClick={this.addUser}
                >
                  Create User
                </Button>
              </>
            )}
          </Modal.Footer>
        </Form>
      </div>
    );
  }
}

export default UserForm;

Answer 1

You are using the same boolean flag show in both the models. You need to create two different state to manage two models. Right now when you setShow(true), it will make both the models visible and edit modal being on top on create user model.

  const [showCreateUserModal, setShowCreateUserModal] = useState(false);
  const [showEditUserModal, setShowEditUserModal] = useState(false);

For Create User

<Modal show={showCreateUserModal} onHide={()=>setShowCreateUserModal(false)} className="modal">

For Create User

<Modal show={showEditUserModal} onHide={()=>setShowEditUserModal(false)} className="modal">

And then update code to use two different states rather than using just one.