react example for render prop

renderPropSample.js

/**
 *
 * @param {*} menuEnd - navbar right side.
 * @param {*} renderDrawer({ isOpen, closeDrawer }) - render prop drawer component
 * @param {object} classes - styles injected
 */

class Navbar extends Component {
  state = {
    isDrawerOpen: false,
  };

  handleBurgerClick = () => {
    this.setState(currentState => ({
      isDrawerOpen: !currentState.isDrawerOpen,
    }));
  };

  closeDrawer = () => {
    this.setState({ isDrawerOpen: false });
  };

  render() {
    const { props, state } = this;
    const renderDrawer = !props.renderDrawer
      ? null
      : props.renderDrawer({
          isOpen: state.isDrawerOpen,
          closeDrawer: this.closeDrawer,
        });
    return (
      <>
        <AppBar position="static" color="inherit">
          {/*some appbar code*/}
        </AppBar>
        {renderDrawer}
      </>
    );
  }
}


// using render props

const NavbarWithDrawer = () => (
  <Navbar
    menuEnd={<h1>Hello</h1>}
    renderDrawer={({ isOpen, closeDrawer }) => (
      <NavbarDrawer isOpen={isOpen} onClose={closeDrawer}>
        {'Hello Drawer'}
      </NavbarDrawer>
    )}
  />
)