How do I close a dialog in another component from Material-UI in React?

Question

I have a modal that have a component inside. I want to close the modal from that component.

I got a component that have:

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable />
   </div>
</Modal>

It is possible to close the modal inside ClientsTable?

Answer 1

It looks like handleCloseModalClients is what closes the modal, so you should just need to pass it into ClientsTable and call it somehow. For example, if you have a button in ClientsTable:

<Modal open={modalClients} onClose={handleCloseModalClients}>
   <div className={classes.paper}>
      <ClientsTable onCloseModal={handleCloseModalClients} />
   </div>
</Modal>

const ClientsTable = (props) => (
  // Not sure what the inside of ClientsTable looks like, but
  // it should have something you can attach the handler to:
  <div>
    <button onClick={props.onCloseModal}>Close Modal</button>
  </div>
)