eBay / nice-modal-react

A modal state manager for React.
https://ebay.github.io/nice-modal-react
MIT License
1.96k stars 110 forks source link

Question: How to update props based on fetch status #48

Closed kestvirb closed 2 years ago

kestvirb commented 2 years ago

Hello, firstly, I wanted to thank you for the library!

Also, I have a question concerning updating props based on some fetch call status.

Is it somehow possible for isLoading to be updated based on what happens inside of the handleDelete function?

Would like to avoid declaring the modal like this: <Modal id="my-antd-modal" isLoading={isLoading} handleDelete={handleDelete} />

const [isLoading, setIsLoading] = useState(false)
const modal = useModal(DeleteModal);

const handleDelete = () => {
  setIsLoading(true)
  api.delete("url").then(() => {}).finally(() => setIsLoading(false))
};

modal.show({
  handleDelete,
  isLoading
});

export default NiceModal.create(({ isLoading, handleDelete }) => {
  const modal = useModal();
  return (
    <Modal visible={modal.visible}>
        Are you sure you want to delete?
      <Button onClick={handleDelete} disabled={isLoading}>Confirm</Button>
    </Modal>
  );
});
DaddyWarbucks commented 2 years ago

I had this same question a while back. You can checkout the answers here: https://github.com/eBay/nice-modal-react/issues/2