HandleClick inside and outside of DOM Element - reactjs

Question

I want to close the menu when there's a click on <Burger /> and when there's a click outside <Burger />. With my current code only the click outside <Burger /> will be handled, but the click on <Burger /> will not close the menu.
When I reverse domNode to !domNode in the handleClickOutside function, clicking inside <Burger /> works, but clicking outside <Burger /> will no longer close the menu. Also I tried adding other conditions to the handleClickOutside function and that did not work also.
What am I missing?
Thanks!
export class NavBar extends React.Component {
constructor(props) {
super(props);
this.state = {
change: false
};
this.handleClick = this.handleClick.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
}
componentDidMount() {
document.addEventListener('click', this.handleClickOutside, true);
}
componentWillUnmount(){
document.removeEventListener('click', this.handleClickOutside, true)
}
handleClick() {
this.setState(state => ({
change: !state.change
}));
}
handleClickOutside(event) {
const domNode = ReactDOM.findDOMNode(this);
if(domNode || !domNode.contains(event.target)){
this.setState(state=> ({
change: false
}))
}
}
render() {
return (
<div>
<div className="mobile">
<Menu change={this.state.change} onClickOutside={this.handleClickOutside} />
<nav>
<Burger change={this.state.change} onClick={this.handleClick} />
</nav>
</div>
</div>
)
}
}
<Burger />
export class Burger extends React.Component {
render(){
return(
<a className={classnames('burger', {'change': this.props.change})} onClick={this.props.onClick}>
<div/>
<div/>
<div/>
</a>
)
}
}
<Menu />
export class Menu extends React.Component {
render(){
return(
<div className={classnames({change: !this.props.change})}>
<div className="menu" onClick={this.props.onClickOutside}>
<Link>
</Link>
<Link>
</Link>
</div>
</div>
)
}
}

Answer 1

I can't be sure since i haven't all your code, but I have a guess.
You added an event listener in componentDidMount:
componentDidMount() {
document.addEventListener('click', this.handleClickOutside, true);
}
With this code, depending on how Burger handle its onClick props, this may happen:
You click inside the Burger; its onClick is triggered which calls the props.onClick and thus you call the handleClick of NavBar;
Then, since the event propagates, it reaches the handleClickOutside, and that's because the event has reached the document. So, since you call handleClickOutside, inside of it you switch again the state.
Again, this is all a guess I'm having. If you wanna test this you can use the debug and notice if, when clicking inside the Burger, you reach both onClick and handleClickOutside.
Anyways, it would be appreciated the code of both Burger and Menu because we cannot know what is happening in there.