title: ReactJS How to call a function that opens a simple modal?
body: <p>My problem might be more related to js syntax, but the thing is, in <code>material-ui</code> we receive the js code for the <code>Modal</code> function, so how, from another file, does one calls the modal to be opened on a button click (in this case it <code>onRowClicked</code> in a table)</p>
  
  <p>The <strong>Modal.js</strong> file with relevant code is:</p>
  
  <pre><code>export default function TransitionsModal() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);
  
    const handleOpen = () =&gt; {
      setOpen(true);
    };
  
    const handleClose = () =&gt; {
      setOpen(false);
    };
  
    return (
      &lt;div&gt;
        &lt;Modal
          aria-labelledby="transition-modal-title"
          aria-describedby="transition-modal-description"
          className={classes.modal}
          open={open}
          onClose={handleClose}
          closeAfterTransition
          BackdropComponent={Backdrop}
          BackdropProps={{
            timeout: 500,
          }}
        &gt;
  </code></pre>
  
  <p>The <strong>MainTable.js</strong> code with the relevant code is:</p>
  
  <pre><code>const openPopup = rowData =&gt; {
      console.log(rowData.EBELN);
      TransitionsModal().setOpen(true); &lt;---- Trying to call the Modal and open it
  }
  
  const MainTable = props =&gt; {
      return (
        &lt;div className="col-md-12"&gt;
          &lt;div className="feed-toggle"&gt;
            &lt;ul className="nav nav-pills outline-active"&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;MaterialTable
              columns = {columnsSetup}
              options = {{ NOT_RELATED }}
  
              onRowClick={(event, rowData) =&gt; openPopup(rowData)} -&gt; calls Open Popup
  
              data={query =&gt; NOT_RELATED
                      });
                    })
                })
              }
            /&gt;
        &lt;/div&gt;
      );
    };
  </code></pre>