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

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?