Children render props

childRenderProps.jsx

export default function App() {
  return (
    <div className="App">
      <Toggle
        render={(on, toggle) => (
          <div>
            {on && <h1>Hello</h1>}
            <button onClick={() => toggle()}>toggle</button>
          </div>
        )}
      />
    </div>
  );
}

const Toggle = ({ render }) => {
  const [on, setToggle] = React.useState(true);
  
  return (
    <div>
      {render({
        on: on,
        toggle: setToggle
      })}
    </div>
  );
};


const ToggleRPC = ({ children }) => {
  const [on, setToggle] = React.useState(true);

  return children({
    on: on,
    toggle: setToggle
  });
};