title: Can't call class functions from main, "is not a function" error
body: <p>I'm attempting to learn react by creating a simple weather app which uses api requests to get the data. The api requires a location key which can be obtained through another function. this means i have to return and then pass the key along to the next function but I seem to be having some trouble doing this!</p>
  
  <blockquote>
  <pre><code>TypeError: _LocationKey__WEBPACK_IMPORTED_MODULE_3__.default.setLocation is not a function" is the error i am given when I attempt to run.
  </code></pre>
  </blockquote>
  
  <p>I'm assuming I made an error with how i am calling the functions as well as how the actual classes are structured. Any help would be appreciated! </p>
  
  <pre><code>//The main app
  function App() {
  
    //runs function to set api location key
    new LocationKey();
    LocationKey.setLocation('winnipeg');
  
    //uses get location key to set weatherData
    new Weather();
    Weather.getWeatherData(LocationKey.getLocation());
  
    //displays location and weather information 
    return (
      &lt;div className="body"&gt;
            &lt;LocationKey/&gt;
            &lt;Weather/&gt;
      &lt;/div&gt;
    );
  }
  
  //The location key class
  export class LocationKey extends Component{
  
    state = {
      locations: []
    }
  
    setLocation(name) {
      axios.get('http://dataservice.accuweather.com/locations/v1/cities/search?apikey=oqAor7Al7Fkcj7AudulUkk5WGoySmEu7&amp;q=' + name + '&amp;language=en&amp;details=false')
        .then(res =&gt; {
          const locations = res.data;
          this.setState({ locations });
        })
    }
  
    getLocation(){
        return this.state.locations[0].Key;
    }
  
  
    render() {
      return (
        &lt;ul&gt;
          { this.state.locations.slice(0, 1).map(location =&gt; &lt;li&gt;{location.EnglishName}&lt;/li&gt;)}
        &lt;/ul&gt;
      )
    }
  }
  export default LocationKey
  
  //Weather Class
  export class Weather extends Component{
  
    state = {
      weatherData: []
    }
  
    //issues command to find weather data from api using location key
    getWeatherData(location) {
      axios.get('http://dataservice.accuweather.com/forecasts/v1/daily/1day/' + location + '?apikey=oqAor7Al7Fkcj7AudulUkk5WGoySmEu7&amp;language=en&amp;details=false&amp;metric=true%20HTTP/1.1')
        .then(res =&gt; {
          const weatherData = res.data;
          this.setState({ weatherData });
        })
    }
  
    render() {
      return (
        &lt;ul&gt;
          { this.state.weatherData.slice(0, 2).map(weather =&gt; &lt;li&gt;{weather.Headline.Text}&lt;/li&gt;)}
          { this.state.weatherData.slice(0, 2).map(weather =&gt; &lt;li&gt;{weather.Headline.Category}&lt;/li&gt;)}
          { this.state.weatherData.slice(0, 2).map(weather =&gt; &lt;li&gt;{weather.DailyForecasts.Maximum.Value}&lt;/li&gt;)}
          { this.state.weatherData.slice(0, 2).map(weather =&gt; &lt;li&gt;{weather.DailyForecasts.Minimum.Value}&lt;/li&gt;)}
        &lt;/ul&gt;
      )
    }
  }
  export default Weather
  </code></pre>