title: React: Data from API not displaying on page after first click
body: <p>I am learning React and working on a simple &quot;search for recipe&quot; app using an API. I have created a search form component that captures the value in a useState hook then passing the &quot;text&quot; value to the app using &quot;onAdd&quot; prop. The text value should update the url after being passed into a second useState [query]. When I type a term into the form then click the search button, nothing happens. When I click the search button again, the data shows up on the page.</p>
  <p>I understand this has something to do with the useState hook being asynchronous and the value not being available until the next render. How can I change this code so the url updates and the data is displayed on the page with a single click?</p>
  <p>My SearchForm component:</p>
  <pre><code>import { useState } from 'react';
  import Card from &quot;./Card&quot;;
  import Button from &quot;./shared/Button&quot;;
  
  
  function SearchForm({ onAdd }) {
  
      const [text, setText] = useState('');
      const [btnDisabled, setBtnDisabled] = useState(true);
      const [message, setMessage] = useState('');
  
      const handleTextChange = (e) =&gt; {
          if (text === '') {
              setBtnDisabled(true)
              setMessage(null)
          } else if (text !== '' &amp;&amp; text.trim().length &lt;= 2) {
              setBtnDisabled(true)
              setMessage('Text must be at least 4 characters')
          } else {
              setMessage(null)
              setBtnDisabled(false)
          }
  
          setText(e.target.value)
      }
  
      function submitRecipe(event) {
          event.preventDefault();
          onAdd(text)
          setText('');
      }
  
      return (
          &lt;form onSubmit={submitRecipe}&gt;
              &lt;Card&gt;
                  &lt;h2&gt;Find Your Perfect Dish&lt;/h2&gt;
                  &lt;div className='input-group'&gt;
                      &lt;input onChange={handleTextChange} type='text' placeholder=&quot;Search for a Recipe&quot; value={text} /&gt;
                      &lt;Button type='submit' version='secondary' isDisabled={btnDisabled} &gt;Search&lt;/Button&gt;
                  &lt;/div&gt;
                  {message &amp;&amp; &lt;div className=&quot;message&quot;&gt;{message}&lt;/div&gt;}
              &lt;/Card&gt;
  
          &lt;/form&gt;
      )
  }
  
  export default SearchForm
  </code></pre>
  <p>My App component:</p>
  <pre><code>import { useState } from 'react';
  import Header from &quot;./components/Header&quot;;
  import SearchForm from &quot;./components/SearchForm&quot;;
  import {v4 as uuidv4} from 'uuid'
  import Axios from 'axios'
  import Recipe from './components/Recipe';
  
  function App() {
  
    const [query, setQuery] = useState('');
    const [recipes, setRecipes] = useState([]);
  
    const APP_ID = 
    const APP_KEY = 
    const url = `https://api.edamam.com/search?q=${query}&amp;app_id=${APP_ID}&amp;app_key=${APP_KEY}`
  
  
    const getData = async (text) =&gt; {
      setQuery(text)
      const result = await Axios.get(url);
      setRecipes(result.data.hits);
    }
  
  
    return (
      &lt;&gt;
        &lt;Header /&gt;
        &lt;div className=&quot;container&quot;&gt;
          &lt;SearchForm onAdd={getData} /&gt;
          {recipes !== [] &amp;&amp; recipes.map( recipe =&gt;
            &lt;Recipe key={uuidv4} recipe={recipe}/&gt;
            )}
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>