Presentational components are concerned with how things look. They usually receive data and callbacks exclusively via props. These components are usually written as functional components unless they need to use state or lifecycle methods.
Example:
const Button = (props) => {
return
}
Container components are concerned with how things work. They are often stateful, as they tend to serve as data sources. These components are usually written as class components.
Example:
class ButtonContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
text: ‘Click Me!’
}
}
handleClick = () => {
this.setState({
text: ‘You clicked!’
});
}
render() {
return
}
}