title: React: Nested onclick also triggers parent
body: <p>I used the react version of the slick carousel to make a Netflix like carousel.
  You can click on a tile and that tile then expands to show the details of that tile.</p>
  
  <p>Example:</p>
  
  <p><a href="https://i.stack.imgur.com/8TYeu.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/8TYeu.jpg" alt="enter image description here"></a></p>
  
  <p>This works great thanks to Slicks ability to handle dynamic heights. 
  I want to add a close button the expanded section (as seen in the far right). But that is where I have an issue.</p>
  
  <p>If I add a close button with a onClick handler, it will always trigger the parent Onclick which shows the expanded section. </p>
  
  <p>The showExpanded onclick function just sets a showDetails state.</p>
  
  <p><strong>So my question is:</strong> </p>
  
  <p>How can I set a state by clicking on the close button, without also triggering the wrapping parent. </p>
  
  <p>I tried event.preventDefault() and event.stopPropagation() but that didn't do the trick. </p>
  
  <p>Tile click looks like this:</p>
  
  <pre><code>expandTile(){
    this.setState({
      showDetails: true,
      closeTile: false
    });
  }
  </code></pre>
  
  <p>Close button click function as I have it now:</p>
  
  <pre><code>closeTile(e){
     e.preventDefault();
     e.stopPropagation();
     const showDetails = this.state.showDetails;
     if(showDetails){
        this.setState({
          showDetails: false,
          closeTile: true
        });
     }
  }
  </code></pre>
  
  <p>Update: added JSX:</p>
  
  <pre><code>  return (
      &lt;div className={s.itemPreWrapper} key={`${el.title}-item-${index}`}&gt;
        &lt;div className={`${s.item} ${showDetails ? s.showDetails : ''}`}
             onClick={self.state.expandItem}
             data-index={index}
          &lt;div className={s.itemCaret}&gt;&lt;/div&gt;
          &lt;div className={s.imgWrapper}&gt;
            &lt;img src={el.itemImage}/&gt;
          &lt;/div&gt;
          &lt;div className={s.overlay}&gt;
            {el.title}
          &lt;/div&gt;
          &lt;div className={s.expandedTile} style={{left: '-'+offset+'px'}}&gt;
            &lt;div className={s.etItem}&gt;
             &lt;div key={`subitem-${index}`} ref="subItem"&gt;
              &lt;div className="row"&gt;
                &lt;div className={`${s.etClose}`} onClick={self.state.closeTile}&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
                &lt;div className="col-xs-12 col-sm-3"&gt;
                  &lt;div className={`${s.etImage}`}&gt;
                    &lt;img src={el.itemImage} alt="product image" className="img-responsive"/&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className="col-xs-12 col-sm-9"&gt;
                  &lt;div className="row"&gt;
                    &lt;div className={`${s.etContent} col-xs-12 col-sm-6 col-lg-8`}&gt;
                      &lt;h2&gt;{itemTitle}&lt;/h2&gt;
                      &lt;p&gt; {el.description}&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div className={`${s.etMedia} col-xs-12 hidden-sm col-sm-5 col-lg-3`}&gt;
                      {media}
                    &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="col-xs-12 col-md-11"&gt;
                {optionsElem}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  </code></pre>