title: React - Axios promise pending value undefined
body: <p>I'm trying to build a weather app using React, react-autosuggest for a dropdown listing available cities and for api fetching Axios.  </p>
  
  <p>App.jsx</p>
  
  <pre><code>import React, { Component } from "react";
  import CityWeather from './components/CityWeather';
  import SearchWeather from './components/SearchWeather';
  
  
  
  
  class App extends Component {
  
      constructor(props){
          super(props);
          this.state = {
              value: '',
              suggestedCities: [],
              cityWeatherData: [],
              currentWeather: [],
          }
      };
  
      handleCityWeatherData = (city) =&gt; {
          this.setState({
              cityWeatherData: city
          });
      };
  
      handleOnChange = (newValue) =&gt; {
          this.setState({
              value: newValue
          });
      }
  
      render() {
  
          // Finally, render it!
          return (
              &lt;div&gt;
                  &lt;SearchWeather suggestData={{value: this.state.value, suggestedCities: this.state.suggestedCities}} onSelectCity={this.handleCityWeatherData} onChange={this.handleOnChange}/&gt;
                  &lt;CityWeather weatherData={this.state.cityWeatherData}/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>Apis.jsx</p>
  
  <pre><code>import Axios from "axios";
  
  //local file
  let cities = "./public/cities.json";
  
  
  export default {
      getCities: function(){
          return  Axios.get(cities).then((res) =&gt; {
              console.log("from apis", res.data.cities);
              resolve(res.data.cities);
          }).catch((error) =&gt; {
              console.log("from apis.jsx", error);
              []
          });
      },
      getTest: function(){
          return 'hello';
      }
      //add api for weather
  };
  </code></pre>
  
  <p>I'm having trouble getting the data, so in <code>SearchWeather.jsx</code> I would like to fetch the list of cities by using a function, <code>const cities = apis.getCities()</code> where it retrieves the data from a different file, <code>Apis.jsx</code> where Axios is being utilized under <code>getCities</code> method.  The error occurs in <code>api.getCities</code>, in the console it says <code>&lt;promise&gt; pending</code> and I get an undefined to the <code>cities</code> variable.  Not sure how to go about this, I tried to add <code>await</code> before <code>getCities</code> in <code>api.jsx</code> but didn't do anything.  I can use <code>fetch</code> instead of <code>Axios</code> but I would like use <code>Axios</code> and learn more about.  I'm sure it's got to do in the <code>const cities = apis.getCities()</code>, but not sure how to go about it, I think I need to use resolve but don't know how.  New to react, so I'm sure I'm missing something.  Your help will be appreciated!</p>
  
  <p>SearchWeather.jsx</p>
  
  <pre><code>import React, { Component } from "react";
  import Axios from "axios";
  import Autosuggest from 'react-autosuggest';
  import apis from '../utils/apis';
  
  
  const getSuggestions = (value) =&gt; {
      const inputValue = value.trim().toLowerCase();
      const inputLength = inputValue.length;
  
  
      const cities = apis.getCities().then((data) =&gt; {
          console.log(data);
          data;
      });
  
      console.log('calling from getSuggestions');
      console.log(cities); //this is undefined from const cities
  
  
      return inputLength === 0 ? [] : cities.filter(city =&gt;
  
          city.name.toLowerCase().slice(0, inputLength) === inputValue
      );
  };
  
  // When suggestion is clicked, Autosuggest needs to populate the input
  // based on the clicked suggestion. Teach Autosuggest how to calculate the
  // input value for every given suggestion.
  const getSuggestionValue = suggestion =&gt; suggestion.name;
  
  // Use your imagination to render suggestions.
  const renderSuggestion = suggestion =&gt; (
    &lt;span&gt;{suggestion.name}&lt;/span&gt;
  );
  
  class SearchWeather extends Component {
  
      onChange = (event, { newValue }) =&gt; {
          this.props.onChange(newValue);
      };
  
      // Autosuggest will call this function every time you need to update suggestions.
      // You already implemented this logic above, so just use it.
      onSuggestionsFetchRequested = ({ value }) =&gt; {
          this.setState({
            suggestedCities: getSuggestions(value)
          });
      };
  
      // Autosuggest will call this function every time you need to clear suggestions.
      onSuggestionsClearRequested = () =&gt; {
          this.setState({
            suggestedCities: []
          });
      };
  
      renderSuggestionsContainer = ({ containerProps, children, query }) =&gt; {
          return (
              &lt;div {...containerProps}&gt;
                  {children}
                  &lt;h5&gt;I like showing up.&lt;/h5&gt;
              &lt;/div&gt;
          );
      };
  
      fetchCityWeather = (cityId) =&gt; {
          //fetching sample request
          Axios.get("/public/sampleWeather.json").then((response) =&gt; {
              if(response.status === 200){
                  return response.data
              }
              else{
                  console.log('fetchCityWeather - something went wrong');
              }
  
          })
          .catch((error) =&gt; {
              console.log(error);
          });
      };
  
      onSuggestionSelected = (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) =&gt; {
          console.log(suggestion);
          console.log(method);
  
          if(method == 'click'){
              let cityId = suggestion.id;
              let data = this.fetchCityWeather(cityId);
              this.props.onSelectCity(data); //pass data to parent
          }
      };
  
  
      componentDidMount = () =&gt; {
          console.log('componentDidMount');
      }
  
  
      render(){
          const value = this.props.suggestData.value;
          const suggestedCities = this.props.suggestData.suggestedCities;
  
          // Autosuggest InputProps
          const inputProps = {
            placeholder: 'Type your city',
            value,
            onChange: this.onChange
          };
  
          return(
              &lt;Autosuggest
                  suggestions={suggestedCities}
                  onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                  onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                  getSuggestionValue={getSuggestionValue}
                  renderSuggestion={renderSuggestion}
                  inputProps={inputProps} 
                  shouldRenderSuggestions = {(v) =&gt; v.trim().length &gt; 0}
                  renderSuggestionsContainer={this.renderSuggestionsContainer}
                  onSuggestionSelected={this.onSuggestionSelected}
              /&gt;
          );
      }
  }
  
  export default SearchWeather;
  </code></pre>
  
  <p>Note:  I put the api calls in a different file just for organizing purposes and would like to keep it that way unless it's not the right way to do it.</p>
  
  <p>Additional Info:</p>
  
  <p>I changed <code>const cities</code> to this:</p>
  
  <pre><code>const cities = apis.getCities().then((data) =&gt; {
          console.log("from getCities", data);
          return data;
      });
  </code></pre>
  
  <p>and I noticed in the console the following in order:</p>
  
  <p>from <code>console.log(cities)</code> in <code>SearchWeather</code></p>
  
  <p><code>Promise {&lt;pending&gt;}</code></p>
  
  <p>from <code>Apis.jsx</code> <code>console.log("from apis", res.data.cities);</code>, the data</p>
  
  <p><code>from apis (4) [{..},{..}]</code></p>
  
  <p>from <code>SearchWeather</code>, <code>console.log("from getCities", data);</code></p>
  
  <p><code>from getCities (4) [{..},{..}]</code></p>
  
  <p>Don't know if this helps but <code>const cities</code> is being skipped then comes back and it prints the actual data</p>