title: onClick event not working on first click in react
body: <p>In here when i press the search button the first time the 'username' state doesn't recieve any data. The 'username' state is empty and the API request in the App.js fails. The second time i click the same button everything works as expected. How do i make it work on the first click ? What's wrong here?</p>
  <pre><code>const Search = ({setInputText, setUsername, inputText, username}) =&gt; {
  
      const inputHandler = (e)=&gt; {
          setInputText(e.target.value)
      }
  
      const searchHandler = (e)=&gt; {
          e.preventDefault()
          setUsername(inputText)
      }
  
      return (
          &lt;div&gt;
              &lt;form&gt;
                  &lt;input value={inputText} onChange={inputHandler} type=&quot;text&quot;/&gt;
                  &lt;button onClick={searchHandler}&gt;Search&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>EDIT : ADDING App.js here</p>
  <pre><code>function App() {
  
    //States
    const [inputText, setInputText] = useState(&quot;&quot;)
    const [username, setUsername] = useState(&quot;&quot;)
    const [stats, setStats] = useState([])
  
    return (
      &lt;div className=&quot;App&quot;&gt;
          &lt;h1&gt;Game Stats&lt;/h1&gt;
          &lt;Search setInputText={setInputText} setUsername={setUsername} inputText={inputText} username={username} setStats={setStats}/&gt;
          &lt;Stats stats={stats}/&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>