如何在 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.