React's stopPropagation does not work for parent event handlers - reactjs

Question

I tried solutions provided on the internet but no luck. Here is the codepen link. This is how the code looks like:
//JSX:
<div className="drawer-component" onClick={this.closeDrawer}>
<div className="drawer-opener">
<button onClick={this.toggleDrawer}>Toggle</button>
</div>
{this.state.isOpen && <div class="drawer">Hello I am a drawer. Cliking on me should not close myself.</div>}
</div>
// Event Handlers:
toggleDrawer(e) {
e.stopPropagation();
this.setState((state, props) => {
return {isOpen: !state.isOpen};
})
}
closeDrawer(e) {
e.stopPropagation();
this.setState((state, props) => {
return {isOpen: false};
})
}
No idea what I am doing wrong, any help would be appreciated.

Answer 1

The behaviour matches the code written.
You have your text in a div(class='drawer') without any click handler, so the click handler of the parent (div class='drawer-component') gets executed, and in this case it is setting your state variable isOpen to false and closing your drawer. The e.stopPropagation() in this does not affect anything since that div does not have any further parent with a click handler to which the event might get propagated.
If what you intended was to have your text clickable without closing your drawer, add a click handler for the div (with class='drawer') which just prevents propagation.
closeDrawer(e) {
// e.stopPropagation(); This isn't required as there's nowhere further the event can get propagated
this.setState((state, props) => {
return {isOpen: false};
})
}
// Prevent click handler of parent being called and closing the drawer
preventClosingOnTextClick(e) {
e.stopPropagation();
}
render() {
return (
<div className="drawer-component" onClick={this.closeDrawer}>
<div className="drawer-opener">
<button onClick={this.toggleDrawer}>Toggle</button>
</div>
{
this.state.isOpen &&
<div class="drawer"
onClick={this.preventClosingOnTextClick}> // This prevents the closing
Hello I am a drawer. Cliking on me should not close myself.
</div>
}
</div>
);
}
};
);