title: can not use the child state that has been passed to parent React
body: <p>i am new to React and i am working on a CV project.
  I have the following situation:
  PersonalData.js (child) that handles a form dynamically updating the state of the component.
  App.js(parent) contains the function <code>eventHandler</code> that is passed to PersonalData as a prop:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Route path=&quot;/&quot; exact element={&lt;PersonalData onChange={this.eventHandler}/&gt;} /&gt;
  </code></pre>
  <p>On the child side, i use the prop as it follows when i click the submit button:</p>
  <pre class="lang-js prettyprint-override"><code>  handleSubmit = (e) =&gt; {
      e.preventDefault();
      this.props.onChange(this.state)
    };
  </code></pre>
  <p>Returning to the parent component, the <code>eventHandler</code> looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>  eventHandler = (data) =&gt;{
      console.log(data.firstName)
      this.setState({
        firstName: data.firstName,
        lastName: data.lastName,
        age: data.age,
        location: data.location,
        email: data.email,
        phone: data.phone,
        gender: data.gender,
      })
      console.log(this.state);
    }
  </code></pre>
  <p>the first console.log shows the value, but after i update the state of the parent component, on the 2nd console.log the state is empty.
  Can't figure out what i am missing.</p>