How to disable click on <div> when <button> in <div> is clicked - html

Question

I am using ReactJS with React-Bootstrap and am rendering the following content:
<div onClick={this.openModal.bind(this)} className="container">
<div className="content">
<div className="list">
...
</div>
<Button onClick={this.deleteContent.bind(this)}
className="delete-content">X
</Button>
<Modal show={this.state.showModal}
onHide={this.closeModal.bind(this)}
className="edit-content">
...
<Button onClick={this.closeModal.bind(this)}
className="close-modal">X
</Button>
</Modal>
</div>
<div>
In <div className="content">, I am rendering a set of components, and when you click on the <div className="Container">, it will open the Modal so you can edit the container's contents. There is a button to delete the container all together, which is inside the <div className="container">, as many containers will be rendered iteratively.
I am controlling whether the Modal is open with the component's state, where this.openModal() and this.closeModal() simply toggle a boolean that determines if the Modal should be shown (this.state.showModal).
My problem is: when I click the Button with className="delete-content" in the container, it also registers a click to open the Modal, because <div className="container"> has an onClick property. Thus, when I delete containers, the app gets stuck thinking the Modal is open, even though it's not.
My first idea to fix this is to move the onClick property from the <div className="container"> to <div className="list">, but I would like all of the space around the <Button className="delete-content"> to be clickable, and if I move it to list it will restrict the clickable area.
Is it possible to somehow implement when the delete-content Button is clicked to temporarily disable the onClick property of the <div className="container">? Or any other ideas/fixes?

Answer 1

It happens because of event propagation. To fix the problem you need to use stopPropagation on the event object.
handleDelete(event) {
event.stopPropagation()
this.deleteContent()
}
<Button
onClick={this.handleDelete.bind(this)}
className="delete-content">X
</Button>