title: React Context API setState callback
body: <p>I have successfully created a React application using the Context API concept in order to manage global state, but now I've run into a problem that involves performing an action after setState is called in the Context component from a child component. </p>
  
  <p>I have a ListView class based component which has within it a ReactBootstrap NavDropdown component.  The dropdown component has two list items: date and study_name (I'm using it to sort a list either by date or study_name):  </p>
  
  <p><code>&lt;NavDropdown title="Order By" id="order-nav-dropdown" style={navElementStyle} onSelect={this.onSelect}&gt;</code></p>
  
  <p>In the same ListView component, I have the following function to capture the onSelect event of the NavDropdown: </p>
  
  <pre><code>onSelect = (e, obj) =&gt; {
  
      var match = obj.target.href.match(/#(.+)$/);
  
      if(this.context.state[match[1]] !== e){
          this.context.updateState(match[1],  e);
      }
    }
  </code></pre>
  
  <p>In order to manage the Context, I have a separate class based component called SearchContext which has a state: </p>
  
  <pre><code>state = {
    order_by: "study_id",  //default value study_id
    sort_by: "desc"        //default value of desc
  }
  </code></pre>
  
  <p>In that context component, I have a method called updateState: </p>
  
  <pre><code>updateState(key, value){
     this.setState({[key]: value});
  }
  </code></pre>
  
  <p>I haven't put all the code of the components here because it's a lot of code, but everything works perfectly.  When I change the drop down list in the component, the state in the SearchContext is updated, and then it is available, for example, when I route out of this component to another component, and then back again.  That was the reason I did this.  I'm using a Router to click on one of the list elements to view that element, but then when I go back to the ListView component, the local state would always be lost I guess because I it was completely re-loading?  </p>
  
  <p>Anyways, after much research, Context API was the approach I found, and like I said...it works.  When I route back to ListView, the dropdown lists preserved their list item values. </p>
  
  <p>The problem now is this: </p>
  
  <p>Before I started using the ContextAPI, I was using local state of the ListView component to call setState directly, so I could pass a callback which would then fetch results from a database using Axios (this.updateList is the name of the callback, the callback is not shown here).  It worked like this: </p>
  
  <pre><code>onSelect = (e, obj) =&gt; {
  
      var match = obj.target.href.match(/#(.+)$/);
  
      if(this.state[match[1]] !== e){
          this.setState({[match[1]] :  e},  this.updateList);
      }
    }
  </code></pre>
  
  <p>This allowed me to call this.updateList after the local state was updated.  That worked fine...but now that I've moved the state into the Context component, I cannot use this method because "this" is relative to the child...not the context component.  So I get an undefined method call back.  </p>
  
  <p>I've done lots of google searches and I'm narrowing down on this being a problem that can only be solved with hooks, but I don't want to go down that path because there must be an easier way to get this working with the class based approach I'm using.  Unless my approach is completely wrong and I'm not doing this the "React" way, I feel like there should be a way for me to get the same functionality of setState and passing a callback from a child to a parent...</p>
  
  <p>If anyone has any suggestions I would appreciate it.  I'm sure I'll eventually have to learn hooks but the fact that React existed before hooks makes me think there should be a class based approach to this. </p>