How can I open a Modal when clicking on a customized button in MaterialUI?

Question

I am trying to open a Modal with a self-created button in React and Material-UI. The button also envokes other funcstions, that is why I need to integrate the "Modal Opening" and the other function within one button. Currently, the modal will not open automatically when clicking on the button.

Do you have any ideas?

This is how I integrated the "CanvasLoadingModal" into the Parent Component:

Step 1. Create a Button that envokes a certain function

return(
<div>
<Button
            variant="contained"
            fullWidth
            className={button1}
            onClick={saveButtonHandler}
          >
            Chatbot in Datenbank <br /> speichern
          </Button>
</div>

Step 2. Include the "CanvasLoadingModal" with props = {true} in "saveButtonHandler" function

const saveButtonHandler1 = () => {
    const showLoadingModal = () => {
      return <CanvasLoadingModal open={true} />;
    };
    showLoadingModal();
}

Answer 1

You can update the state and let React handle the rendering part and conditionally render the CanvasLoadingModal component when clicked. The same function can also be used to close the modal as well.

const App = ()=> {

    const [showModal,setShowModal] = useState(false);
    
    function showModalHandler(){
        setShowModal(!showModal);
    }
    return (
        <Button onClick={showModalHandler} />
        {showModal ? <CanvasLoadModal open={showModal} />: null }
    )

}