title: Control modal from parent - React hooks | Reactstrap
body: <p>I have a problem with controlling reactstrap Modal from the parent. I have basic knowledge of passing data to a child element, but I don't know how when it is more complex, like this...
  I'm in depression because I can't get it working for a whole day, sorry for bad English.</p>
  <p>This is part of the code that is in the parent hook, this should on click show Modal (change state of child modal):</p>
  <pre><code>  import SignUp from &quot;components/modals/ModalSignup&quot;;
  
    &lt;NavLink href=&quot;#pablo&quot; onClick={(e) =&gt; e.preventDefault()}&gt;
        &lt;SignUp/&gt;
        &lt;i className=&quot;ni ni-spaceship padding-right&quot;&gt;&lt;/i&gt;
        Register
    &lt;/NavLink&gt;
  </code></pre>
  <p>How I should control the state of the Modal element from the parent element?
  e.g. When someone presses the register button it changes the state of the children hook (Modal)</p>
  <p>Bellow is a working child hook where is reactstrap Modal element</p>
  <pre><code>import React from &quot;react&quot;;
  
  // reactstrap components
  import {
    Button,
    Card,
    CardHeader,
    CardBody,
    FormGroup,
    Form,
    Input,
    InputGroupAddon,
    InputGroupText,
    InputGroup,
    Modal,
  } from &quot;reactstrap&quot;;
  
  // Core Components
  
  function ModalSignup() {
    const [modalOpen, setModalOpen] = React.useState(false);
    const [emailFocus, setEmailFocus] = React.useState(&quot;&quot;);
    const [passwordFocus, setPasswordFocus] = React.useState(&quot;&quot;);
    const [passwordConfirmFocus, setPasswordConfirmFocus] = React.useState(&quot;&quot;);
    return (
        &lt;Modal
          isOpen={modalOpen}
          toggle={() =&gt; setModalOpen(!modalOpen)}
          className=&quot;modal-dialog-centered modal-sm&quot;
        &gt;
          &lt;div className=&quot;modal-body p-0&quot;&gt;
            &lt;Card className=&quot;bg-secondary shadow border-0 mb-0&quot;&gt;
              &lt;CardHeader className=&quot;bg-white pb-5&quot;&gt;
                &lt;div className=&quot;text-muted text-center mb-3&quot;&gt;
                  &lt;small&gt;Sign Up with&lt;/small&gt;
                &lt;/div&gt;
                &lt;div className=&quot;btn-wrapper text-center&quot;&gt;
                  &lt;Button
                    className=&quot;btn-neutral btn-icon&quot;
                    color=&quot;default&quot;
                    href=&quot;#pablo&quot;
                    onClick={(e) =&gt; e.preventDefault()}
                  &gt;
                    &lt;span className=&quot;btn-inner--icon&quot;&gt;
                      &lt;img
                        alt=&quot;...&quot;
                        src={require(&quot;assets/img/icons/common/google.svg&quot;)}
                      &gt;&lt;/img&gt;
                    &lt;/span&gt;{&quot; &quot;}
                    &lt;span className=&quot;btn-inner--text&quot;&gt;Google&lt;/span&gt;
                  &lt;/Button&gt;{&quot; &quot;}
                  &lt;Button
                    className=&quot;btn-neutral btn-icon&quot;
                    color=&quot;default&quot;
                    href=&quot;#pablo&quot;
                    onClick={(e) =&gt; e.preventDefault()}
                  &gt;
                    &lt;span className=&quot;btn-inner--icon&quot;&gt;
                      &lt;img
                        alt=&quot;...&quot;
                        src={require(&quot;assets/img/icons/common/github.svg&quot;)}
                      &gt;&lt;/img&gt;
                    &lt;/span&gt;{&quot; &quot;}
                    &lt;span className=&quot;btn-inner--text&quot;&gt;Github&lt;/span&gt;
                  &lt;/Button&gt;
                &lt;/div&gt;
              &lt;/CardHeader&gt;
              &lt;CardBody className=&quot;px-lg-5 py-lg-5&quot;&gt;
                &lt;div className=&quot;text-center text-muted mb-4&quot;&gt;
                  &lt;small&gt;Or sign up here:&lt;/small&gt;
                &lt;/div&gt;
                &lt;Form role=&quot;form&quot;&gt;
                  &lt;FormGroup className={&quot;mb-3 &quot; + emailFocus}&gt;
                    &lt;InputGroup className=&quot;input-group-alternative&quot;&gt;
                      &lt;InputGroupAddon addonType=&quot;prepend&quot;&gt;
                        &lt;InputGroupText&gt;
                          &lt;i className=&quot;ni ni-email-83&quot;&gt;&lt;/i&gt;
                        &lt;/InputGroupText&gt;
                      &lt;/InputGroupAddon&gt;
                      &lt;Input
                        placeholder=&quot;Email&quot;
                        type=&quot;email&quot;
                        onFocus={() =&gt; setEmailFocus(&quot;focused&quot;)}
                        onBlur={() =&gt; setEmailFocus(&quot;&quot;)}
                      &gt;&lt;/Input&gt;
                    &lt;/InputGroup&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup className={passwordFocus}&gt;
                    &lt;InputGroup className=&quot;input-group-alternative&quot;&gt;
                      &lt;InputGroupAddon addonType=&quot;prepend&quot;&gt;
                        &lt;InputGroupText&gt;
                          &lt;i className=&quot;ni ni-lock-circle-open&quot;&gt;&lt;/i&gt;
                        &lt;/InputGroupText&gt;
                      &lt;/InputGroupAddon&gt;
                      &lt;Input
                        placeholder=&quot;Password&quot;
                        type=&quot;password&quot;
                        onFocus={() =&gt; setPasswordFocus(&quot;focused&quot;)}
                        onBlur={() =&gt; setPasswordFocus(&quot;&quot;)}
                      &gt;&lt;/Input&gt;
                    &lt;/InputGroup&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup className={passwordConfirmFocus}&gt;
                    &lt;InputGroup className=&quot;input-group-alternative&quot;&gt;
                      &lt;InputGroupAddon addonType=&quot;prepend&quot;&gt;
                        &lt;InputGroupText&gt;
                          &lt;i className=&quot;ni ni-lock-circle-open&quot;&gt;&lt;/i&gt;
                        &lt;/InputGroupText&gt;
                      &lt;/InputGroupAddon&gt;
                      &lt;Input
                        placeholder=&quot;Confirm Password&quot;
                        type=&quot;password&quot;
                        onFocus={() =&gt; setPasswordConfirmFocus(&quot;focused&quot;)}
                        onBlur={() =&gt; setPasswordConfirmFocus(&quot;&quot;)}
                      &gt;&lt;/Input&gt;
                    &lt;/InputGroup&gt;
                  &lt;/FormGroup&gt;
                  &lt;div className=&quot;text-center&quot;&gt;
                    &lt;Button className=&quot;my-4&quot; color=&quot;primary&quot; type=&quot;button&quot;&gt;
                      Sign Up
                    &lt;/Button&gt;
                  &lt;/div&gt;
                &lt;/Form&gt;
              &lt;/CardBody&gt;
            &lt;/Card&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
    );
  }
  
  export default ModalSignup;
  </code></pre>