React decorator function

decoratorFunctionExample.js

function BaseTodoItem(props) {
  return {
    render() {
      return (
        <label>{props.content}</label>
      )
    }
  }
}

function MakeCompletable(Child) {
  class Completable extends Component {
    render() {
      const {checked, onChange, ...childProps} = this.props;
      return (
        <div>
          <input
            className = "toggle"
            type = "checkbox"
            checked = {checked}
            onChange = {onChange} />
          <Child {...childProps} />
        </div>
      )
    }
  }
  return Completable;
}

function MakeDeletable(Child) {
  class Deletable extends Component {
    render() {
      const {onDelete, ...otherProps} = this.props;
      return (
        <div>
          <Child {...otherProps} />
          <button
            className = "delete-todo"
            onClick = {onDelete} />
        </div>
      );
    }
  }
  return Deletable;
}