React.js - Using context to call a component's method anywhere

My application consists of several pages. Every page has a ToastContainer component and some other component that behaves as a small single-page application (in this case, Job):

Note that Job and ToastContainer are siblings.

I have set up some basic toasts in my application and I want to be able to call a method on ToastContainer called pushToast(...) from anywhere in my application, since many child components of make AJAX calls that return feedback/responses to the user and it is not feasible to pass down a toast method into every component that I have.

const ToastContext = React.createContext(); //???

export default class ToastContainer extends Component {

  constructor(props) {
    super(props);

    this.state = {
      toastList: [],
    }
  }

  render() {
    return(
      
      <div id="toast-container" className="toast-container position-absolute top-0 end-0 p-3" style=zIndex>

        {this.state.toastList.map(toast => (

          <Toast .../>

        ))}

      </div>
    )
  }

  pushToast = (title, time, content) => //HOW CAN I MAKE THIS METHOD ACCESSIBLE TO JOB AND ITS CHILDREN?
  {

    var newToast = {
      title: title,
      time: time,
      content: content,
    }

    this.setState({
      toastList: [...this.state.toastList, newToast]
    })
  }

I think what I need to use are React.js contexts, but I don't know where to define the context and if the other components (such as Job) will have access to it. I need to somehow send pushToast defined in ToastContainer into every component (globally) so that I can call it from anywhere I want

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW