title: set multiple states, and push to state of array in one onClick function
body: <p>I'm running into a recurring issue in my code where I want to grab multiple pieces of data from a component to set as states, and push those into an array which is having its own state updated. The way I am doing it currently isn't working and I think it's because I do not understand the order of the way things happen in js and react.</p>
  
  <p>Here's an example of something I'm doing that doesn't work: <a href="https://jsfiddle.net/b2ofy6qa/" rel="nofollow noreferrer">jsfiddle here</a> or code below.</p>
  
  <pre><code>import React, {Component} from 'react';
  
  class App extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              categoryTitle: null,
              categorySubtitle: null,
              categoryArray: [],
          }
      }
  
      pushToCategoryArray = () =&gt; {
          this.state.categoryArray.push({
              'categoryTitle': this.state.categoryTitle,
              'categorySubtitle': this.state.categorySubtitle,
          })
      }
  
      setCategoryStates = (categoryTitle, categorySubtitle) =&gt; {
          this.setState({
              categoryTitle: categoryTitle,
              categorySubtitle: categorySubtitle,
          })
          this.pushToCategoryArray();
      }
  
      render() {
          return (
              &lt;CategoryComponent
                  setCategoryStates={this.setCategoryStates}
                  categoryTitle={'Category Title Text'}
                  categorySubtitle={'Category Subtitle Text'}
              /&gt;
          );
      }
  }
  
  class CategoryComponent extends Component {
      render() {
          var categoryTitle = this.props.categoryTitle;
          var categorySubtitle = this.props.categorySubtitle;
          return (
              &lt;div onClick={() =&gt; (this.props.setCategoryStates(
                      categoryTitle,
                      categorySubtitle,
                  ))}
              &gt;
                  &lt;h1&gt;{categoryTitle}&lt;/h1&gt;
                  &lt;h2&gt;{categorySubtitle}&lt;/h2&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I can see in the console that I am grabbing the <code>categoryTitle</code> and <code>categorySubtitle</code> that I want, but they get pushed as <code>null</code> into <code>this.state.categoryArray</code>. Is this a scenario where I need to be using promises? Taking another approach?</p>