title: Delayed post parameters when submitting via onChange in reactjs
body: <p>I'm trying to send a parameter to the api to give me an exact json response, but when i'm trying to submit my form via select onChange={onAddSubmit}, it is still passing the default value 146846 but I already changed my select to 146847 so i'm getting the invalid response.</p>
  <p>Home.js</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import Api from &quot;../Api&quot;;
  
  import AppContainer from &quot;../tmp/AppContainer&quot;;
  import HomeContainer from &quot;./HomeContainer&quot;;
  
  const Home = () =&gt; {
      const [posts, setPosts] = useState();
      const [loading, setLoading] = useState(false);
      const [allValues, setAllValues] = useState({
          contractId: &quot;146846&quot;,
          planId: &quot;1028&quot;,
          dateStart: &quot;2021-01-30&quot;,
          dateEnd: &quot;2021-01-31&quot;,
          numberOfAdults: 1,
          numberOfChildren: 0,
          planOption: &quot;Individual&quot;,
          unit: &quot;day&quot;,
      });
      const changeHandler = (e) =&gt; {
          setAllValues({ ...allValues, [e.target.name]: e.target.value });
      };
  
      const onAddSubmit = async (e) =&gt; {
          e.preventDefault();
          setLoading(true);
          try {
              await Api.getCurlPost({
                  ...allValues,
              }).then((response) =&gt; {
                  const result = response.data;
                  setPosts(result.data);
              });
          } catch {
              alert(&quot;Failed to add post!&quot;);
          } finally {
              setLoading(false);
          }
      };
      useEffect(() =&gt; {
          onAddSubmit;
      }, []);
  
      return (
          &lt;AppContainer&gt;
              &lt;HomeContainer
                  onAddSubmit={onAddSubmit}
                  changeHandler={changeHandler}
                  loading={loading}
                  posts={posts}
              /&gt;
          &lt;/AppContainer&gt;
      );
  };
  
  export default Home;
  
  </code></pre>
  <p>Here is my <strong>HomeContainer.js</strong> that contains my html and bootstrap design</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
  import { faPlane } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  import { faCircleNotch } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  
  class HomeContainer extends Component {
      render() {
          const { onAddSubmit, changeHandler, loading, posts } = this.props;
          return (
              &lt;div&gt;
                  &lt;div className=&quot;row mb-auto&quot;&gt;
                      &lt;div className=&quot;col-md-6 p-2&quot;&gt;
                          &lt;img
                              width=&quot;100%&quot;
                              src=&quot;../resources/img/starr/7437.jpg&quot;
                          /&gt;
                          &lt;div className=&quot;mt-3 shadow-sm p-3 mb-5 bg-white rounded&quot;&gt;
                              &lt;h3 className=&quot;text-center&quot;&gt;
                                  &lt;FontAwesomeIcon
                                      icon={faPlane}
                                      rotation={0}
                                      style={{ marginRight: 5 }}
                                  /&gt;
                                  Travel Details
                              &lt;/h3&gt;
                              &lt;form onChange={onAddSubmit}&gt;
                                  &lt;div className=&quot;form-group&quot;&gt;
                                      &lt;select
                                          className=&quot;form-control&quot;
                                          name=&quot;contractId&quot;
                                          onChange={changeHandler}
                                      &gt;
                                          &lt;option value=&quot;146846&quot;&gt;
                                              TravelLead Domestic Travel Insurance
                                          &lt;/option&gt;
                                          &lt;option value=&quot;146847&quot;&gt;
                                              TravelLead International Travel
                                              Insurance
                                          &lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;form-group&quot;&gt;
                                      &lt;select
                                          className=&quot;form-control&quot;
                                          name=&quot;planId&quot;
                                          onChange={changeHandler}
                                      &gt;
                                          &lt;option value=&quot;1028&quot;&gt;
                                              Economy (Single Trip)
                                          &lt;/option&gt;
                                          &lt;option value=&quot;1029&quot;&gt;
                                              Elite (Single Trip)
                                          &lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;    
                         &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default HomeContainer;
  </code></pre>