Pseudo code for a provider component

medium_article_context-toast_provider.jsx

import React from 'react';
import Renderer from './Renderer';

export const ToastContext = React.createContext();

export class ToastProvider extends React.Component {
  state = { toasts: [] }

  add = (content) => {
    this.setState(...);
  }
  remove = (id) => {
    this.setState(...);
  }

  render() {
    const context = {
      add: this.add,
      remove: this.remove,
    }

    return (
      <ToastContext.Provider value={context}>
        {this.props.children}
        <Renderer toasts={this.state.toasts} />
      </ToastContext.Provider>
    );
  }
}