When to use functional components.

MyComponent.js

const Title = ({children}) => (
  <div className={classes.titleContainer}>
    <span className={classes.titleIcon} />
    <h3 className={classes.titleHeadline}>
      {children}
    </h3>
  </div>
)

const Select = ({value, options, onChange}) => (
  <select onChange={onChange} value={value} className={classes.select}>
    {options.map(option => (
      <option value={option.value}>{option.title}</option>
    ))}
  </select>
)

const Footer = ({onClose}) => (
  <div className={classes.footer}>
    <div className={classes.hint}>
      Some text.  
    </div>
    <button className={classes.done} onClick={onClose}>Done</button>
  </div>
)

export default class MyComponent extends PureComponent {
  onChange = (e) => {
   // Handle select change.
  }

  onClose = (e) => {
    // Handle close.
  }

  render() {
    return (
      <div className={classes.root}>
        <Title>Some Title</Title>
        <Select onChange={this.onChange} />
        <Footer onClose={this.onClose} />
      </div>
    )
  }
}