title: How can I open Material UI Modal from parent component?
body: <p>This is my parent component:</p>
  
  <pre><code>import React from 'react';
  import ChildModal from 'ChildModal';
  
  const ParentComponent = () =&gt; (
    &lt;div&gt;
      &lt;span&gt;Click &lt;/span&gt;
      &lt;a&gt;HERE TO OPEN MODAL&lt;/a&gt;
    &lt;div&gt;
  );
  </code></pre>
  
  <p>This is my child component:</p>
  
  <pre><code>import React, { useState } from "react";
  import { Modal, Backdrop, Fade } from "@material-ui/core";
  
  const ChildModal = () =&gt; {
    const [open, setOpen] = useState(false);
  
    const handleOpen = () =&gt; {
      setOpen(true);
    };
  
    const handleClose = () =&gt; {
      setOpen(false);
    };
  
    return (
      &lt;div&gt;
        &lt;button type="button" onClick={handleOpen}&gt;
          react-transition-group
        &lt;/button&gt;
        &lt;Modal
          aria-labelledby="transition-modal-title"
          aria-describedby="transition-modal-description"
          className="modal"
          open={open}
          onClose={handleClose}
          closeAfterTransition
          BackdropComponent={Backdrop}
          BackdropProps={{
            timeout: 500
          }}
        &gt;
          &lt;Fade in={open}&gt;
            &lt;div className="paper"&gt;
              &lt;h2 id="transition-modal-title"&gt;Transition modal&lt;/h2&gt;
              &lt;p id="transition-modal-description"&gt;
                react-transition-group animates me.
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/Fade&gt;
        &lt;/Modal&gt;
      &lt;/div&gt;
    );
  };
  
  </code></pre>
  
  <p>So, basically, how can I open modal from parent component?
  Should I pass a prop or handle <code>open</code> state in some other matter?</p>
  
  <p>Also, can this be done with <code>a</code> tag? I need to use it to keep it in the same line, and this is not real-world scenario, but you'll get the point. :) </p>
  
  <p>Thank you.</p>