title: Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type
body: <p>I have a problem that I don't know how to solve.</p>
  
  <p>I'm trying to call an <code>onClick</code> that is inside of a <code>Component</code>. But got this error:</p>
  
  <blockquote>
    <p>Uncaught Error: Expected <code>onClick</code> listener to be a function, instead got a value of <code>object</code> type.</p>
  </blockquote>
  
  <p>My code that call the <code>Component</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import './Square.css';
  import Controller from './controller.js';
  
  class Square extends React.Component {
   render() {
      return (
      &lt;div className="square" onClick={&lt;Controller/&gt;}&gt;
          {this.props.children(&lt;Controller/&gt;)}
        &lt;/div&gt;
      )
    }
  }
  
  export default Square;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my <code>component</code>called with function:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  
  class Controller extends React.Component {
      changePlayer = () =&gt; {
         alert('oi')
      }
      render(){
          return(
              &lt;div&gt;
                  {this.props.position}
              &lt;/div&gt;
          )
      }
  
  }
  
  export default Controller;</code></pre>
  </div>
  </div>
  </p>
  
  <p>That line, I want to pass o <code>render</code> of the <code>Controller</code> to render..</p>
  
  <pre><code>{this.props.children(&lt;Controller/&gt;)}
  </code></pre>
  
  <p>But it is giving error. Someone help me, please?.</p>