React Smart and Dumb Components - reactjs

Question

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
class Child extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div><p>I said {this.props.greeting} {this.props.count} times</p>
</div>
);
}
}
class Parent extends React.Component {
constructor() {
super();
this.state = {
count: 0,
greeting: "Hello"
};
}
sayHello() {
this.setState((prevState, props) => {
return {
count: prevState.count + 1,
greeting: "Hello"
}
}
)};
sayGoodBye() {
this.setState((prevState, props) => {
return {
count: this.count = 1,
greeting: "Goodbye"
}
}
)};
render() {
return (
<div>
<button onClick={() => this.sayHello() }>Say Hello</button>
<button onClick={() => this.sayGoodBye() }>Say Goodbye</button>
<Child count={this.state.count} greeting={this.state.greeting} />
</div>
)
}
}
ReactDOM.render(<Parent />, document.getElementById('app'));

Answer 1

I think the separation in this case is good. The buttons are directly involved with the state of Parent so creating a child just for them will be an overkill. In general the "dump" components are only about visually showing data/state. Sometimes they contain elements like buttons but the only one thing that they do is to notify the outside world that X thing happened.
Also the Child could be a stateless function:
const Child = ({ greeting, count }) => (
<div>
<p>I said { greeting } { count } times</p>
</div>
);
You could try making a component to be just a function. If you can't then it is probably not as dump as you think it is :)