React Smart and Dumb Components separation query I have been working on React and would like to know best practices for separating smart and dumb components.

This example is a Parent controls state, but I have put the button UI in render. Should these go into child and implemented back to parent via callback or is that overkill?

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'));
Seems like you got a good start. 

Consider refactoring components that do not keep state into a "functional component". More about functional components here. This is a simple JavaScript arrow function that returns what you would like the component to render, based on your props. The function will take the prop-object as an argument. In your case it would become:

const Child = (props) =&gt; (
    &lt;div&gt;
        &lt;p&gt;I said {props.greeting} {props.count} times&lt;/p&gt;    
    &lt;/div&gt;
)


Or even simpler using destructuring from Ecmascript 2015. Notice that we can retrieve the attributes of the prop-object directly in the function parameters.

const Child = ({greeting, count}) =&gt; (
    &lt;div&gt;
        &lt;p&gt;I said {greeting} {count} times&lt;/p&gt;    
    &lt;/div&gt;
)


I think your parent component is fine. You are separating the concerns of the buttons and text output neatly and there is no need to move the buttons into the Child component. This is obviously a simple example, in more complex cases it might make sense to encapsulate the elements inside another component in order to prevent re-rendering or because of functional cohesion. In this case it would perhaps be overkill.