title: Clicking on a div that contains span, doesn't trigger onclick event - React
body: <p>I have a div, and inside I am rendering spans based on some conditions. If the component has some children, I'd like this div to expand. It works fine if I click on this div on an area outside of the inner span. </p>
  
  <p>An example, is the following <a href="https://i.stack.imgur.com/1zjlY.png" rel="nofollow noreferrer">Image</a>. When clicking on the row, it expands the area to show items like <a href="https://i.stack.imgur.com/7ewpC.png" rel="nofollow noreferrer">this</a>. However, when I click on the header text, it's not working, the on click event doesn't fire. </p>
  
  <p>Here's my code: </p>
  
  <pre><code> &lt;div className={headerStyles.header} onClick={(e) =&gt; this.selectHeader(e, this.props.items.length)}&gt;
      {this.props.items.length &gt; 0 &amp;&amp; 
            &lt;span className={headerStyles.expand} style={{ color: this.props.headerNameColor }}&gt;&lt;/span&gt;
                      }
            &lt;span style={{ color: this.props.headerNameColor }}  &gt;{this.props.headerName}&lt;/span&gt;
                      {this.props.headerUrl &amp;&amp;
                          &lt;a
                              style={{ color: this.props.headerNameColor }}
                              href={this.props.headerUrl}
                              data-interception="off"
                              target="_blank"
                              title="Open link in a new tab"&gt;
                              &lt;i className={['ms-Icon', 'ms-Icon--OpenInNewWindow', headerStyles.openNewTab].join(' ')}&gt;&lt;/i&gt;
                          &lt;/a&gt;
                      }
                  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the function that gets called when clicking the header: </p>
  
  <pre><code> selectHeader(e, numOfItems) {
          if (e.target.children.length &gt; 0 &amp;&amp; numOfItems &gt; 0) {
              e.target.children[0].classList.toggle(headerStyles.expand)
              e.target.children[0].classList.toggle(headerStyles.collapse)
              e.target.parentElement.querySelector(`.${headerStyles.items}`).classList.toggle(headerStyles.hidden)
          }
          else if(this.props.headerUrl){
  
          }
      }
  </code></pre>
  
  <p>Any guidance is appreciated. </p>
  
  <p>Thanks</p>