title: React <a> tag and button onClick propagation
body: <p>I want to create a React component with a render method that has an <code>&lt;a&gt;</code> tag that wraps an entire "box", if you will, which redirects to another page when clicked. Within said box there is a <code>&lt;button&gt;</code> that can be clicked that activates an event that changes state. 
  What I want to be able to do is click the <code>&lt;button&gt;</code> and trigger the event without the redirect from the <code>&lt;a&gt;</code> tag occurring. </p>
  
  <p>Tried some ideas with stopPropagation() but no luck :/ I don't want to move the button outside of the <code>&lt;a&gt;</code> tag either so not sure where to go from here.</p>
  
  <p>It seems like it should be something simple but I just can't figure it out. Thanks!</p>
  
  <p>the render method looks like this: </p>
  
  <pre><code>render(){
   return(
    &lt;div&gt;
     &lt;a href="http://www.google.com"&gt; 
      &lt;div className="box"&gt;
  
       &lt;h2 className="title"&gt;Random Title&lt;/h2&gt;
  
       &lt;button onClick={this.handleClick}&gt; Like &lt;/button&gt;
  
      &lt;/div&gt;  
     &lt;/a&gt;
    &lt;/div&gt; 
   )
  }
  </code></pre>
  
  <p>handleClick() would look something like this:</p>
  
  <pre><code>handleClick = () =&gt; {
    if (this.state.liked) {
    console.log("disliking")
  } else {
    console.log("liking")
  }
  
  this.setState({ liked: !this.state.liked})
  }
  </code></pre>