title: Modal not closing when clicking on Backdrop (ReactJS)
body: <p>I'm having problems when trying to close a modal by clicking in the Backdrop.</p>
  <p>Below I have a functional component where there is a form with some inputs that, when filled in and the save button is clicked, a modal appears. I'm using <strong>show</strong> constant to manipulate it, such as the methods <strong>showModal</strong> and <strong>hideModal</strong>. The SaveButton component does not interfere with anything related to this problem, that is why I'm not showing it here.</p>
  <pre><code>import React, { useState } from 'react';
  import { useForm } from 'react-hook-form';
  import SaveButton from '../../UI/Buttons/SaveButton/SaveButton';
  import Modal from '../../UI/Modal/Modal';
  
  
  const CreateProject = () =&gt; {
      const { register, handleSubmit, errors } = useForm();
      const [show, setShow] = useState(false);
  
  const showModal = () =&gt; {
      console.log(show);
      setShow({ show: !show });
  };
  
  const hideModal = () =&gt; {
      console.log(show);
      setShow({ show: false });
  };
  
  const onSubmit = (data, e) =&gt; {
      showModal();
      e.target.reset();
  };
  
  const fields = [
      {
          name: &quot;Project Name&quot;,
          type: &quot;text&quot;
      },
      {
          name: &quot;Lens Quantity&quot;,
          type: &quot;number&quot;
      },
      {
          name: &quot;Description&quot;,
          type: &quot;textarea&quot;
      }
  ];
  
  return (
      &lt;div&gt;
          &lt;form id=&quot;parent&quot;
              style={{ width: &quot;100%&quot;, display: &quot;flex&quot;, top: &quot;20%&quot;, justifyContent: &quot;center&quot; }}
              onSubmit={handleSubmit(onSubmit)}&gt;
              &lt;div&gt;
                  &lt;div&gt;
                      {
                          fields.map(({ name, type }) =&gt; (
                              &lt;div key={name}&gt;
                                  &lt;div className=&quot;input-group col&quot; style={{ marginTop: &quot;3px&quot; }}&gt;
                                      &lt;div className=&quot;input-group-prepend&quot;&gt;
                                          &lt;span className=&quot;input-group-text&quot;&gt;{name}&lt;/span&gt;
                                      &lt;/div&gt;
                                      {type !== &quot;textarea&quot; ?
                                          &lt;input type={type} min=&quot;0&quot;
                                              onKeyDown={e =&gt; (e.keyCode === 189) &amp;&amp; e.preventDefault()}
                                              className=&quot;form-control&quot; name={name} ref={register({ required: true })} /&gt;
                                          :
                                          &lt;textarea className=&quot;form-control&quot; name={name} ref={register} /&gt;
                                      }
                                  &lt;/div&gt;
                                  {errors[name] &amp;&amp; &lt;span style={{ color: &quot;#cf1b1b&quot;, display: &quot;flex&quot;, paddingLeft: &quot;18px&quot; }}&gt;Please enter a {name}.&lt;/span&gt;}
                              &lt;/div&gt;
                          ))
                      }
                  &lt;/div&gt;
                  &lt;SaveButton /&gt;
              &lt;/div&gt;
          &lt;/form&gt;    
           &lt;Modal show={show} modalClosed={hideModal}&gt;
                  Success!
          &lt;/Modal&gt;
      &lt;/div&gt;
    )
  }
  
  export default CreateProject;
  </code></pre>
  <p>The modal appears, but I can't close it, such as the Backdrop. Both should disappear when clicking in the Backdrop.</p>
  <p><strong>Backdrop</strong> component</p>
  <pre><code>import React from 'react';
  import './Backdrop.css';
  
  const Backdrop = (props) =&gt; (
      props.show ? &lt;div className=&quot;backdrop&quot; onClick={props.clicked}&gt;&lt;/div&gt; : null
  );
  
  export default Backdrop;
  </code></pre>
  <p>I put some <strong>console.logs</strong> to see if the <strong>show</strong> constant value changes to false when clicking in the Backdrop and it does, but I don't know why the modal and the Backdrop don't disappear as they should when the <strong>show</strong> constant is set to false.</p>
  <p><strong>Modal</strong> component</p>
  <pre><code>import React, { Component } from 'react';
  import Backdrop from '../Backdrop/Backdrop';
  import Aux from '../../hoc/Auxiliary/Auxiliary';
  import './Modal.css';
  
  class Modal extends Component {
      shouldComponentUpdate(nextProps, nextState) {
          return nextProps.show !== this.props.show || nextProps.children !== this.props.children;
      }
      render() {
          console.log(&quot;Show&quot;, this.props.show)
          return (
              &lt;Aux&gt;
                  &lt;Backdrop show={this.props.show} clicked={this.props.modalClosed} /&gt;
                  &lt;div className=&quot;save-modal&quot;
                      style={{
                          transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
                          opacity: this.props.show ? '1' : '0',
                      }}&gt;
                      {this.props.children}
                  &lt;/div&gt;
              &lt;/Aux&gt;
          );
      }
  };
  
  export default Modal;
  </code></pre>
  <p><strong>Auxiliary</strong> component</p>
  <pre><code>const Auxiliary = (props) =&gt; props.children;
  
  export default Auxiliary;
  </code></pre>
  <p>To make it easier to understand, here I leave the code example.</p>
  <p><a href="https://codesandbox.io/s/open-close-modal-40qbx?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit open-close-modal" /></a></p>
  <p>Thank you all!</p>