title: React - How to prevent click event from child component
body: <p>Before mark as duplicate, Its differents. I have this scenario, where I suppose to get some non-predefined element into a child component. In where when the user clicks on that element it's fired on the parent element events. How can I stop the event trigger on the parent when the child is clicked? Let me explain more with the following example-</p>
  
  <p>So, it's basically an accordion list, by clicking on each item title div (<code>list-container__item____title</code>) the body div (<code>list-container__item____body</code>) will display.</p>
  
  <p>Now, inside the title div, I have a link (<code>list-container__item____title--link</code>) which opens an overlay (child component). The overlay content comes from API call and the contains of it is HTML. I can't add some more functions for that element as I don't know what was included there, it's based on user choice. If in the HTML have some clickable element like an anchor, button, etc. the state (<code>activeItem</code>) is updated with empty (<code>''</code>) value. The result is the respective item is collapsed. Is there any way to prevent this event?</p>
  
  <pre><code>import React from 'react';
  
  class DiamondFilters extends React.Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              activeItem: ''
          };
      }
  
      handleItemToggle = (name) =&gt; {
          if (this.state.activeItem === name) {
              this.setState({ activeItem: '' })
          } else {
              this.setState({ activeItem: name })
          }
      }
  
      render() {
          return (
              &lt;div className="menu"&gt;
                  &lt;div className="list-container"&gt;
                      &lt;div className={`list-container__item ${this.state.activeItem === "item1" ? 'active' : ''}`}&gt;
                          &lt;div className="list-container__item____title" onClick={() =&gt; this.handleItemToggle('item1')}&gt;
                              &lt;a className="list-container__item____title--link"&gt;Click Here 1&lt;/a&gt;
                              &lt;OverlayModal modalType="full" modalName="item1" /&gt;
                          &lt;/div&gt;
                          &lt;div className="list-container__item____body"&gt;
                              &lt;p&gt;There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className={`list-container__item ${this.state.activeItem === "item2" ? 'active' : ''}`}&gt;
                          &lt;div className="list-container__item____title" onClick={() =&gt; this.handleItemToggle('item2')}&gt;
                              &lt;a className="list-container__item____title--link"&gt;Click Here 2&lt;/a&gt;
                              &lt;OverlayModal modalType="full" modalName="item2" /&gt;
                          &lt;/div&gt;
                          &lt;div className="list-container__item____body"&gt;
                              &lt;p&gt;There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  
  }
  </code></pre>