title: Reactjs - can't apply onClick to rendered component
body: <p>If I have the following code inside a React class component:</p>
  
  <pre><code>      &lt;svg viewBox="-100 -100 600 500" id='renderName' &gt;
              &lt;Initial value={this.props.value.substring(0,1)} /&gt; 
        &lt;/svg&gt;
  </code></pre>
  
  <p>I seem to only be able to fire an onClick event from the container svg, and not from the 'Initial' component I'm rendering.</p>
  
  <p>E.g.</p>
  
  <pre><code>      &lt;svg viewBox="-100 -100 600 500" id='renderName' onClick={this._onButtonClick} &gt;
  </code></pre>
  
  <p>^ Works</p>
  
  <pre><code>      &lt;Initial value={this.props.value.substring(0,1)} onClick={this._onButtonClick} /&gt;
  </code></pre>
  
  <p>^ Doesn't work</p>
  
  <p>Any idea why this could be? Is it something to do with 'onClick' being passed as a prop instead of calling the function?</p>
  
  <p>As an update: <code>Initial</code> is being rendered within another component. It is on this component where there's a function I want to call with onClick.</p>