title: TypeError: Cannot read property 'then' of undefined - React Hooks
body: <p>I am new to React and I am creating a website where the user can search for a query and the results are shown.</p>
  
  <p>I have one component called: <code>Searchbar</code>which contains two functions:</p>
  
  <p>1)
  The user writes a query, which is sent via axios POST request to the backend when the user preses enter.</p>
  
  <p>2) The backend search the relative query and sends the results back via axios GET request.</p>
  
  <p>Therefore the order is: <code>postQuery()--&gt;getQueryResult()</code> so I think that <code>postQuery()</code> creates a promise that, if resolved, allows <code>getQueryResult()</code> to run.
  However I get:</p>
  
  <blockquote>
    <blockquote>
      <p>TypeError: Cannot read property 'then' of undefined</p>
      
      <p>Error on line 38: return postQuery(query).then(() => getQueryResult());</p>
    </blockquote>
  </blockquote>
  
  <p><strong>My code is:</strong></p>
  
  <pre><code>function Searchbar() {
  
      const [query, setQuery] = useState("");
    const [results, setResults] = useState(["myemptyinitiallist"]);
  
    function postQuery(query) {
      var myParams = {
           data: query
      }
      axios.post('http://localhost:5000/api/query', myParams)
        .then(function(response){
          console.log("Yes, it sends the query in JSON format to Flask");
        })
        .catch(function(error){
          console.log(error, "Error on AXIOS post");
        });
    } // Enf of postQuery
  
    function getQueryResult() {
      (axios.get('http://localhost:5000/api/query')
      .then(function (response) {
        setResults(response.data); //set the value
        console.log(results)
      }))
    } // End getQueryResult()
  
      function handleEnter(query){
          if (query != "") {
        return postQuery(query).then(() =&gt; getQueryResult());
      } else {
          alert("The search query cannot be empty")
        }
    } // End of function handleEnter()
  
  
      return(
      &lt;div&gt;
          &lt;SearchBar
              onChange={(event) =&gt; setQuery(event)}
              onRequestSearch={() =&gt; handleEnter(query)}
              style={{
                  marginTop: 200,
                  marginLeft: 'auto',
                  marginRight: 'auto',
                  maxWidth: 800,
              }}
          /&gt;
        &lt;ResultList/&gt;
  &lt;/div&gt;
      )
  }
  
  
  export default Searchbar;
  </code></pre>