title: Material UI Dialog close dialog from inner component
body: <p>I have a sign in dialog I have created using material ui but I am using a separate component for the log in button.</p>
  <p>How would I close the dialog when I click the button? It is the submit button in the SigninForm component that I want to close the dialog. I used the code from material ui's sample exept I extracted it out some and using my own components as I want the button inside the SigninForm because I swap the form out between that one and the SignupForm.</p>
  <p>App:</p>
  <pre><code>function App() {
      return (
          &lt;AppContainer&gt;
              &lt;SampleDialogueDemo /&gt;
          &lt;/AppContainer&gt;
      );
  }
  </code></pre>
  <p>SampleDialogue:</p>
  <pre><code>function SampleDialogue(props) {
      const { onClose, selectedValue, open } = props;
  
      const handleClose = () =&gt; {
          onClose(selectedValue);
      };
  
      return (
          &lt;Dialog onClose={handleClose} open={open}&gt;
              &lt;AccountBox /&gt;
          &lt;/Dialog&gt;
      );
  }
  
  SampleDialogue.propTypes = {
      onClose: PropTypes.func.isRequired,
      open: PropTypes.bool.isRequired,
  };
  
  export default function SampleDialogueDemo(props) {
      const [open, setOpen] = useState(false);
  
      const handleClickOpen = () =&gt; {
          setOpen(true);
      };
  
      const handleClose = () =&gt; {
          setOpen(false);
      };
  
      return (
          &lt;div&gt;
              &lt;button onClick={handleClickOpen}&gt;Click Me&lt;/button&gt;
              &lt;SampleDialogue onClose={handleClose} open={open} /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>AccountBox:</p>
  <pre><code>export function AccountBox() {
      const [isExpanded, setExpanded] = useState(false);
      const [active, setActive] = useState('signin');
  
      const playExpandingAnimation = () =&gt; {
          setExpanded(true);
          setTimeout(() =&gt; {
                  setExpanded(false);
              },
              expandedTransition.duration * 1000 - 1500);
      };
  
      const switchToSignup = () =&gt; {
          playExpandingAnimation();
          setTimeout(() =&gt; {
              setActive('signup');
          }, 400);
      };
  
      const switchToSignin = () =&gt; {
          playExpandingAnimation();
          setTimeout(() =&gt; {
              setActive('signin');
          }, 400);
      };
  
      const contextValue = { switchToSignup, switchToSignin };
  
      return (
          &lt;AccountContext.Provider value={contextValue}&gt;
              &lt;BoxContainer&gt;
                  &lt;TopContainer&gt;
                      &lt;BackDrop initial={false}
                                animate={isExpanded ? 'expanded' : 'collapsed'}
                                variants={backdropVariants}
                                transition={expandedTransition} /&gt;
                      {active === 'signin' &amp;&amp;
                      &lt;HeaderContainer&gt;
                          &lt;HeaderText&gt;Create&lt;/HeaderText&gt;
                          &lt;HeaderText&gt;Account&lt;/HeaderText&gt;
                          &lt;SmallText&gt;Please sign-up to continue!&lt;/SmallText&gt;
                      &lt;/HeaderContainer&gt;
                      }
                      {active === 'signup' &amp;&amp;
                      &lt;HeaderContainer&gt;
                          &lt;HeaderText&gt;Welcome&lt;/HeaderText&gt;
                          &lt;HeaderText&gt;Back&lt;/HeaderText&gt;
                          &lt;SmallText&gt;Please sign-in to continue!&lt;/SmallText&gt;
                      &lt;/HeaderContainer&gt;
                      }
                  &lt;/TopContainer&gt;
                  &lt;InnerContainer&gt;
                      {active === 'signin' &amp;&amp; &lt;SigninForm /&gt;}
                      {active === 'signup' &amp;&amp; &lt;SignupForm /&gt;}
                  &lt;/InnerContainer&gt;
              &lt;/BoxContainer&gt;
          &lt;/AccountContext.Provider&gt;
      );
  }
  </code></pre>
  <p>SigninForm:</p>
  <pre><code>export function SigninForm() {
      const { switchToSignup } = useContext(AccountContext);
  
      return &lt;BoxContainer&gt;
          &lt;Marginer direction={'vertical'} margin={15} /&gt;
          &lt;FormContainer&gt;
              &lt;Input type={'email'} placeholder={'Email'} /&gt;
              &lt;Input type={'password'} placeholder={'Password'} /&gt;
              &lt;Marginer direction={'vertical'} margin={10} /&gt;
              &lt;MutedLink href={'#'}&gt;Forgot Password?&lt;/MutedLink&gt;
              &lt;Marginer direction={'vertical'} margin={'1.6em'} /&gt;
  -------&gt;    &lt;Submit type={'submit' onClick={CLOSE DIALOG HERE}&gt;Sign In&lt;/Submit&gt;
              &lt;Marginer direction={'vertical'} margin={'1em'} /&gt;
              &lt;MutedLink href={'#'}&gt;
                  Don't have an account?
                  &lt;BoldLink href={'#'} onClick={switchToSignup}&gt;Sign Up&lt;/BoldLink&gt;
              &lt;/MutedLink&gt;
          &lt;/FormContainer&gt;
      &lt;/BoxContainer&gt;;
  }
  </code></pre>
  <p>Ok I got to work. I had to add</p>
  <pre><code> const {handleClose} = props
  </code></pre>
  <p>in my AccountBox function and then change</p>
  <pre><code>{active === 'signin' &amp;&amp; &lt;SigninForm  /&gt;}
  </code></pre>
  <p>to</p>
  <pre><code>{active === 'signin' &amp;&amp; &lt;SigninForm onClick={handleClose} /&gt;}
  </code></pre>
  <p>Then I could close it from SigninForm.</p>