render-prop-component-injection-crossover.jsx

const { Component } = React;
const { render } = ReactDOM;

const MyMug = ({ drink, verb = 'Drinking' }) =>
  <div>{verb} an {drink}.</div>;

class Caffeinate extends Component {
  state = { coffee: 'Americano' };

  render() {
    const { renderMug } = this.props;
    const { coffee: beverage } = this.state;
 
    return renderMug({ beverage });
  }
}

render(
  <Caffeinate
    renderMug={({ beverage }) => <MyMug drink={beverage} verb="Sipping" />}
  />,
  document.getElementById('root')
);