title: React - Prevent Event Trigger on Parent From Child
body: <p>I have this scenario, where when parent element is clicked, it flips to show a child element with different colours. Unfortunately, when the user clicks on one of the colours, the 'click' event on parent is also triggered.</p>
  
  <p><em>How can I stop the event trigger on parent when the child is clicked?</em></p>
  
  <p>Possible solutions I am wondering:</p>
  
  <ol>
  <li><p><strong>CSS</strong>?<br>
  Append <code>pointer-events : none</code> class to the parent when the child is clicked. However, this would mean that the parent will need to be cleansed of the <code>pointer-events</code> class later.</p></li>
  <li><p><strong>Using Ref</strong>?<br>
  Record the <code>ref</code> of the parent <code>React</code> element &amp; upon click on the child, compare the <code>event.target</code> against the ref? I don't like this because I don't like the global <code>ref</code>. </p></li>
  </ol>
  
  <p>Thoughts and the better solution would be much appreciated. The question is:
  How can I stop the event trigger on parent when the child is clicked?</p>