Renderless Components

script.jsx

/* Edit on Codepen: https://codepen.io/alexkrolick/pen/QMXMMv */

class StateContainer extends React.Component {
  constructor(props) {
    super(props);
  }

  get handlers() {
    return {};
  }

  render() {
    return null;
  }
}

function combine(Container, Presenter) {
  if (!Presenter) return combine.bind(undefined, Container);
  class Combined extends Container {
    constructor(props) {
      super(props);
    }

    render() {
      return Presenter(
        { ...this.props, ...this.state, ...this.handlers },
        ...this.context
      );
    }
  }
  Combined.displayName = `${Container.name}(${Presenter.name})`;
  return Combined;
}

class A extends StateContainer {
  constructor(props) {
    super(props);
    this.state = { text: "foo" };
  }

  get handlers() {
    return {
      setText: e => this.setState({ text: e.target.value })
    };
  }
}

const B = ({ text, setText }) => <input onChange={setText} value={text} />;

const C = combine(A)(B);

ReactDOM.render(<C />, document.querySelector(".app"));