title: React Event Handler Button Click Not Working on First Click
body: <p>I am making the Recipe Box project from Free Code Camp. I have an event handler that is supposed to send an object that contains an array property made up of ingredients up to a parent component which will display the items in the array. The problem is, when I first click the button that fires the handler, it sends an empty array even though there are ingredients entered by the user, and the second time I click it, it sends the ingredients from the previous button click, and it goes on like this every time the button is clicked. How can I fix this?</p>
  
  <p>Method in question: </p>
  
  <pre><code>  handleSubmit() {
      let ingredientsArrayUpdater = (ingredient) =&gt; {
        this.setState(prevState =&gt; ({
          ingredientsArr: [
            ...prevState.ingredientsArr,
            ingredient
          ]
        }))
      }
  
      let splitUserInput = this.state.ingredients.split(',');
  
      splitUserInput.map(ingredient =&gt; {
        return(
        ingredientsArrayUpdater(ingredient.trim())
      )
      });
  
      let recipeObject = {
        recipeName: this.state.recipe,
        ingredientList: this.state.ingredientsArr,
        idNumber: Math.floor((Math.random() * 100000000) + 1)
      }
      this.props.addRecipe(recipeObject);
    }
  </code></pre>
  
  <p>Code for button that triggers event handler:</p>
  
  <pre><code> &lt;button onClick={e =&gt; {this.handleSubmit()}}
                 className="btn btn-outline-success btn-sm"&gt;
                 Add Recipe
                &lt;i className="fas fa-plus"&gt;&lt;/i&gt;
   &lt;/button&gt;
  </code></pre>
  
  <p>Here is the github repository to see all the components. Index.js is the parent component.</p>
  
  <p><a href="https://github.com/EsTrevino/recipe-box-project/tree/master/src" rel="nofollow noreferrer">https://github.com/EsTrevino/recipe-box-project/tree/master/src</a></p>