F - AdvancedReactComponent.jsx

class Toggle extends React.Component {
  static Consumer = ToggleContext.Consumer
  toggle = () =>
    this.setState(
      ({on}) => ({on: !on}),
      () => this.props.onToggle(this.state.on),
    )
  state = {on: false, toggle: this.toggle}
  render() {
    return (
      <ToggleContext.Provider value={this.state} {...this.props} />
    )
  }
}

G - AdvancedReactComponentHooksFn.jsx

function Toggle(props) {
  const [toggleState, setToggleState] = useState({ on: false })

  const providerValue = {
    ...toggleState,
    toggle: () =>
      setToggleState(({ on }) => {
        const isOn = !on;
        props.onToggle(isOn)
        return { on: isOn }
      }),
  }

  return <ToggleContext.Provider value={providerValue} {...props} />
}