title: How to apply useEffect based on form submission in React?
body: <p>I am trying to make an API call inside a functional component, based on a form submission:</p>
  
  <pre><code>const SearchForm = () =&gt; {
      const [keywords, setKeywords] = useState('')
      const [fetchedData, setFetchedData] = useState('')
  
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
          useEffect(() =&gt; {
              async function fetchData() {
                  const {data} = await axios.post('http://127.0.0.1:8000/api/posts/', keywords)
                  setFetchedData(data);
              }
              fetchData()
          })
      }
  
      return (
          &lt;div&gt;
              &lt;form onSubmit={ handleSubmit }&gt;
                  &lt;div className='input-field'&gt;
                  &lt;input placeholder="Search whatever you wish" 
                      type="text"
                      value={keywords}
                      onChange={(e) =&gt; setKeywords(e.target.value)}
                  /&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>However when I try this, the following error shows up:</p>
  
  <pre><code>React Hook "useEffect" is called in function "handleSubmit" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
  </code></pre>
  
  <p>How do I carry this out?</p>