ContextConsumers.jsx

class Layout extends React.Component {
  render() {
    return (
      <AlertContext.Consumerr>
        {({ alert }) => (
          <React.Fragment>
            {alert && <FancyAlertMessage alert={alert} />
            {this.props.children}
          </React.Fragment>
        )}
      </AlertContext.Consumer>
    );
  }
}

class ComponentWithAlert extends React.Component {
	render() {
    const myAlert = { message: "This is my alert", type: "error" };
    return (
      <AlertContext.Consumer>
        {({ showAlert }) => (
          <button onClick={() => showAlert(myAlert)}>Show Alert</button>
        )}
      </AlertContext.Consumer>
    );
  }
}