Hello

0.provider.jsx

import ModalContext from './modal-context';

class Parent extends Component {
  render() {
    return (
      <ModalContext.Provider value={this.state.modalContext}>
        <Child/>
      </ModalContext.Provider>
    );
  }
  
  toggleModal(displayModal) {
    this.setState({
      modalContext: {
        displaying: displayMode,
        toggleModal: this.toggleModal
      }
    });
  }
}

1.subscriber.jsx

import ModalContext from './modal-context';

// Although this was the immediate child in this example, it is better to imagine
// it as the great-great-great-great grandchild, which is why we didn't just use props :)
class Child extends Component {
  render() {
    return (
      <ModalContext.Consumer>
        {(displaying, toggleModal) => {
          <Fragment>
            {displaying && <Modal hide={() => toggleModal(false)}/>}
            <button onClick={() => toggleModal(true)}>
              Show modal
            </button>
          </Fragment>
        }}
      </ModalContext.Consumer>
    );
  }
}