title: ReactJS function is not being called
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class A extends React.Component {
    constructor(props) {
      super(props);
      this.state = { obj: this.two }
      this.one = this.one.bind(this);
      this.two = this.two.bind(this);
    }
  
    one() {
      console.log("Working...")
    }
  
    two() {
      return &lt;input type='submit' onClick={this.one} /&gt;;
    }
  
    render() {
      return (
        &lt;h1&gt;
            As Function:&lt;B two={this.two} /&gt;
            As Object Property: &lt;B two={this.state.obj} /&gt;
        &lt;/h1&gt;
      )
    }
  }
  
  
  class B extends React.Component {
    render() {
      return (
        &lt;h1&gt;{this.props.two()}&lt;/h1&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;A /&gt;, document.getElementById('app'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id='app'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  
  Here i am trying to send a function <code>two</code> from component A to component B which returns an input element.On input element i have given onClick which calls function <code>one</code> of component A and outputs in console.</p>
  
  <p>So now i'm sending the function <code>two</code> to component B in two forms</p>
  
  <ul>
  <li>One as a direct function</li>
  <li>Other as a property of an object,which is given in state[as object property]</li>
  </ul>
  
  <p>In both the cases button is rendering but the input is firing onClick only with the 1st case but not with 2nd
  i want to make this work in 2nd case also.</p>
  
  <p>Thanks in advance...Help me out</p>