React - Prevent Event Trigger on Parent From Child
<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>