title: React API response through form onSubmit
body: <p>I'm trying to make an API call with a User's input and store the response to display it.
  <br />
  The steps I'm taking:</p>
  <ol>
  <li>storing the user's input through <code>onChange=&quot;handleLocationChange&quot;</code></li>
  <li>sending the input through the form's <code>onSubmit={this.handleSubmit}</code></li>
  <li>then calling <code>const weatherData = GetAPIData(API_KEY, this.state.cityID);</code> to fetch API data</li>
  <li>in the GetAPIData component I create the hooks <code>const [weatherData, setWeatherData] = useState([]);</code> and then return the json API response in the weatherData hook
  <br /><br />
  I'm breaking a hooks rule (I believe my error is in trying to call a hook after rendering) and getting the following error, but I haven't been able to figure out how to solve for this error:</li>
  </ol>
  <blockquote>
  <p>Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component
  <br /></p>
  </blockquote>
  <h3>Class component (main file)</h3>
  <pre><code>import GetAPIData from &quot;./GetAPIData&quot;;
  
  class IOData extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        country: &quot;&quot;,
        city: &quot;&quot;,
        cityID: &quot;&quot;,
        APIData: &quot;&quot;,
      };
    }
  
    handleLocationChange = (event) =&gt; {
      this.setState({
        city: event.target.value,
      });
    };
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      const API_KEY = &quot;*insert key value*&quot;;
      this.setState({cityID: &quot;6533961&quot;}); // I think this is also incorrect since it is an event
      const response = GetAPIData(API_KEY, this.state.cityID);
      this.setState({APIData: response});
    };
  
    render() {
      const { country, city } = this.state;
      return (
        &lt;div&gt;
            &lt;form onSubmit={this.handleSubmit}&gt;
                &lt;label&gt;City:&lt;/label&gt;
                &lt;input
                  type=&quot;text&quot;
                  name=&quot;city&quot;
                  value={city}
                  onChange={this.handleLocationChange}
                /&gt;
              &lt;button type=&quot;submit&quot;&gt;Go!&lt;/button&gt;
            &lt;/form&gt;
  {APIData}
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  <h3>Function Component that retrieves the API response (second file, breaks here...)</h3>
  <pre><code>const GetAPIData = (API_KEY, cityID) =&gt; {
    const [weatherData, setWeatherData] = useState([]); // I believe it breaks here
    const endpoint = `http://api.openweathermap.org/data/2.5/weather?id=${cityID}&amp;appid=${API_KEY}`;
    
    useEffect(() =&gt; {
      fetch(endpoint)
        .then(response =&gt; response.json())
        .then(data =&gt; {
          setWeatherData(data);
          })
    }, [])
  
    return weatherData;
  };
  </code></pre>
  <br />
  Does the solution have to do with having to re-render the class component to make the hooks work? How can I make the API response go through without an error?