I have a Context Consumer which works like this:

```
<ToastConsumer>
          {({ openToast }) => (
            <button onClick={() => openToast('You clicked Button A!')}>
              Button A
            </button>
          )}
        </ToastConsumer>

```

But I want to add some extra logic on the click handler and move the openToast Consumer function like this:

```
 upVote = () => {
    if (!this.state.hasVoted) {
      this.setState({
        hasVoted: true,
        rating: this.state.rating + 1,
      });

      this.vote(this.state.rating + 1);
    }

    this.openToast // not working???
  };

      <ToastConsumer>
        {({ openToast }) => (
          <div className="vote-button">
            <span
              className="vote-up vote-action cursor-pointer"
              onClick={this.upVote}
            >
               +1...

```

All of the examples provided for the Context API seem to be a simple click handler and I cant workout how to acheive a more complex example like this one.