CODEWITHSUNDEEP
javascripthtmlcssreactjs
Lance Han
Lance Han

Reputation: 63

Hide Div onClick when clicking outside the child div | ReactJS

I currently have a a parent div and a child div in the middle of the parent div. I want to be able to close the parent div only on clicking outside of the child div. How would I go about doing this? I have my code currently set up as below, with the triggerParentUpdate to set true or false whether to show div.

<div onClick={this.props.triggerParentUpdate} className="signupModalContainer">
    <div className="embed-responsive embed-responsive-16by9">
        <form action="action_page.php">
            <div className="container">
            <button onClick={this.props.triggerParentUpdate} type="button" className="closebtn">X</button>                             
            </div>
        </form> 
    </div>
</div>

the onclick function in the first div (className="signupModalContainer") makes it so that when I click that div or any of the child divs, all the divs close. if I take that onclick function out, then the divs close via the closebtn.

Thank you!

Upvotes: 2

Views: 1514

Answers (2)

Nicolas Amaya
Nicolas Amaya

Reputation: 1

Is also easy to check for clicks in the parent

   const handleParentClick = event => {
    event.preventDefault();

    if (event.target === event.currentTarget) {
      console.log('parent clicked');
      // 👇 your logic here
    }
  };

Upvotes: 0

dance2die
dance2die

Reputation: 36905

Create a handler for the child div's onClick event handler, which stops the propagation/bubbling up of the event to the parent.

Refer to Event.stopPropagation method for more info.

class SomeComponent extends Component {
  handleCloseButton = e => {
    // This stops the event from bubbling up.
    // So it won't trigger the parent div's "onClick" to fire.
    e.stopPropagation();
    this.props.triggerParentUpdate(e);
  }

  render () {
    // ...
    return (
      <div onClick={this.props.triggerParentUpdate} className="signupModalContainer">
          <div className="embed-responsive embed-responsive-16by9">
              <form action="action_page.php">
                  <div className="container">
                  <button onClick={this.handleCloseButton} type="button" className="closebtn">X</button>                             
                  </div>
              </form> 
          </div>
      </div>
    );
  }
)

Upvotes: 1

Related Questions