title: How to access the latest state value in the functional component in React
body: <pre><code>import React, { useState } from "react";
  import Child from "./Child";
  import "./styles.css";
  
  export default function App() {
    let [state, setState] = useState({
      value: ""
    });
  
    let handleChange = input =&gt; {
      setState(prevValue =&gt; {
        return { value: input };
      });
      console.log(state.value);
    };
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;{state.value}&lt;/h1&gt;
  
        &lt;Child handleChange={handleChange} value={state.value} /&gt;
      &lt;/div&gt;
    );
  }
  import React from "react";
  
  function Child(props) {
    return (
      &lt;input
        type="text"
        placeholder="type..."
        onChange={e =&gt; {
          let newValue = e.target.value;
          props.handleChange(newValue);
        }}
        value={props.value}
      /&gt;
    );
  }
  
  export default Child;
  </code></pre>
  
  <p>Here I am passing the data from the input field to the parent component. However, while displaying it on the page with the h1 tag, I am able to see the latest state. But while using console.log() the output is the previous state. How do I solve this in the functional React component?</p>