Understand React Render Props

render-props-no-jsx

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Toggle extends React.Component {
  state = { on: false };
  toggle = () => this.setState({ on: !this.state.on });
  render() {
    return this.props.children({ on: this.state.on, toggle: this.toggle });
  }
}

// React.createElement(component, props, ...children)
class App extends React.Component {
  render() {
    return React.createElement(Toggle, null, ({ on, toggle }) =>
      React.createElement("button", { onClick: toggle }, on ? "Hello" : "Bye")
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);