title: ReactJS Dynamic Children and onClick events
body: <p>I am having issues with a ReactJS component using a Mixin and dynamic children firing the onClick event. I have a react component, that based on some props passed to it, will push additional react components into an array. Then in the final return statement from the render method, add these components to the content. These dynamic children define an onClick event in their render method and use a handler from the mixin. However, only the handler on the parent fires. I never get a click event on the children. However, if these children are hardcoded, the onClick handler does indeed fire. Any idea what I'm doing wrong? Rough example:</p>
  
  <p>Mixin:</p>
  
  <pre><code>var eventhandler = {
      handleClick: function(e) { console.log('click', this.name); }
  };
  </code></pre>
  
  <p>The component and its child component:</p>
  
  <pre><code> var foo = React.createClass({
      mixins: [eventhandler],
      name: '',
      ...
      render: function() {
          children_comps = [];
          if(somecondition) {
              children_comps.push(&lt;ChildComponent id={this.props.id} /&gt;);
          }
  
          return (&lt;div onClick={this.handleClick}&gt;&lt;p&gt;asdf&lt;/p&gt;{children_comps}&lt;/div&gt;);
      }
  };
  </code></pre>
  
  <p>ChildComponent:</p>
  
  <pre><code>var ChildComponent = React.createClass({
      mixins: [eventhandler],
      name: '',
      ...
      render: function() {
          return(&lt;div onClick={this.handleClick}&gt;CHILD {this.props.id} OF THE WILD&lt;/div&gt;);
      }
  };
  </code></pre>