title: Trigger useEffect on an api call with query
body: <p>I'm trying to build a Search component using React Hooks and the main feature is when I put a Word inside my input, I make an API call with that word and it returns words that matches</p>
  <p>Right now the component looks like this</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  import './SearchBar.css';
  
  export function SearchBar() {
    const [query, setQuery] = useState('');
    const [searchResults, setSearchResults] = useState([]);
    const handleChange = event =&gt; {
      setQuery(event.target.value);
      console.log(event);
    };
  
    useEffect(() =&gt; {
      const fetchCities = query =&gt; {
        const uri = 'http://0.0.0.0:8000/v1/autocomplete/';
        axios
          .get(uri, {
            params: {
              q: query
            }
          })
          .then(response =&gt; {
            const data = response.data.filter(name =&gt;
              name.toLowercase().includes(query)
            );
            setSearchResults(data);
            console.log('searchResults' + searchResults);
          })
          .catch(err =&gt; {
            console.log(err); //I know this is nothign but im running out of time tbh
          });
      };
  
      fetchCities();
    }, [query]);
  
    const handleSubmit = evt =&gt; {
      /*  evt.preventDefault();
      alert(apiCall());
      reset(); */
    };
    return (
      &lt;form onSubmit={handleChange} className='display'&gt;
        &lt;input
          type='text'
          placeholder='Search'
          onChange={event =&gt; setQuery(event.target.value)}
        /&gt;
        &lt;input type='submit' value='Submit' className='resize' /&gt;
        &lt;ul&gt;
          {searchResults.map(item =&gt; (
            &lt;li&gt;{item}&lt;/li&gt;
          ))}
        &lt;/ul&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/form&gt;
    );
  }
  </code></pre>
  <p>Right now on page load I get this error</p>
  <pre><code>xhr.js:166 GET http://0.0.0.0:8000/v1/autocomplete/ 400 (Bad Request)
  dispatchXhrRequest @ xhr.js:166
  xhrAdapter @ xhr.js:16
  dispatchRequest @ dispatchRequest.js:49
  Promise.then (async)
  </code></pre>
  <p>When I only want the API call to be made when I submit the form. Any help ?</p>