title: props.children in react cannot be a stateless component?
body: <p>I'm trying to practice render props patter in react but I got error of </p>
  
  <blockquote>
    <p>this.props.children is not a function</p>
  </blockquote>
  
  <p>this is my code</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  
  
  const Box = ({color}) =&gt; (
    &lt;div&gt;
      this is box, with color of {color}
    &lt;/div&gt;
  );
  
  class ColoredBox extends React.Component {
    state = { color: 'red' }
    getState() {
      return {
        color: this.state.color
      }
    }
    render() {
      return this.props.children(this.getState())
    }
  }
  
  render(&lt;ColoredBox&gt;&lt;Box /&gt;&lt;/ColoredBox&gt;, document.getElementById('root'));
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/8z0xmk9ojl" rel="noreferrer">https://codesandbox.io/s/8z0xmk9ojl</a></p>