title: React Smart and Dumb Components
body: <p>Have been working on React and would like to know, best practices for seperating smart and dumb componenents. Example below Parent controls state, but i have put button ui in render, should these go into child and implemented back to parent via callback or is that overkill? thoughts..here is my code</p>
  
  <pre><code>class Child extends React.Component { 
    constructor(props){
    super(props);
    }
    render() {
    return (
       &lt;div&gt;&lt;p&gt;I said {this.props.greeting} {this.props.count} times&lt;/p&gt;    
      &lt;/div&gt;
      );
    }
  }
  
  class Parent extends React.Component {
    constructor() {
      super();
      this.state = { 
        count: 0,
        greeting: "Hello"
      };
    }
  
    sayHello() {
      this.setState((prevState, props) =&gt; {
      return { 
        count: prevState.count + 1,
            greeting: "Hello"
             }
      }                   
    )};
      sayGoodBye() {
      this.setState((prevState, props) =&gt; {    
      return {       
        count: this.count = 1,
        greeting: "Goodbye"
             }
      }                   
    )};
  
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={() =&gt; this.sayHello() }&gt;Say Hello&lt;/button&gt;
          &lt;button onClick={() =&gt; this.sayGoodBye() }&gt;Say Goodbye&lt;/button&gt;
        &lt;Child count={this.state.count} greeting={this.state.greeting} /&gt;
          &lt;/div&gt;
      )
  
    }
  }
  
  ReactDOM.render(&lt;Parent /&gt;, document.getElementById('app'));
  </code></pre>