title: Getting undefined error on accessing JSON object in react - OpenWeatherAPI
body: <p>I am using OpenWeatherMapAPI to fetch current weather (API keys are hidden).
  The idea is to fetch the value and pass it as props to render in a different component.
  I have tried a few ways but unable to display value from the response.</p>
  <p>The response is valid as I have checked it on jsonlint.</p>
  <p>I am getting an undefined error.</p>
  <pre><code>const [city, setCity] = useState();
    let currentWeather;
  
    {
      // UseEffect to run the effect during initial render
      useEffect(() =&gt; {
        
          axios
            .get(baseUrl + city + &quot;,IN&amp;APPID=&quot; + APPKey + &quot;&amp;units=metric&quot;)
            .then((res) =&gt; {
              currentWeather = res.data;
            });
        
        // fetch(baseUrl + city + &quot;,IN&amp;APPID=&quot; + APPKey + &quot;&amp;units=metric&quot;);
      }, []);
    }
  
    const handleInputChanges = (e) =&gt; {
      setCity(e.target.value);
    };
  
    const resetSearchValue = () =&gt; {
      setCity(&quot;&quot;);
    };
  
    const fetchWeather = async (e) =&gt; {
      e.preventDefault();
      {
        {
          axios
            .get(baseUrl + city + &quot;,IN&amp;APPID=&quot; + APPKey + &quot;&amp;units=metric&quot;)
            .then((res) =&gt; {
              currentWeather = res.data;
              console.log(&quot;weather&quot;, currentWeather);
            });
        }
      }
  
      resetSearchValue();
    };
  
    return (
      &lt;Container className=&quot;themed-container&quot; fluid=&quot;sm&quot;&gt;
        &lt;InputGroup className=&quot;search&quot;&gt;
          &lt;Input
            placeholder=&quot;Enter a city in India&quot;
            value={city}
            onChange={handleInputChanges}
          /&gt;
          &lt;InputGroupAddon addonType=&quot;append&quot;&gt;
            &lt;Button color=&quot;secondary&quot; onClick={fetchWeather}&gt;
              Check
            &lt;/Button&gt;
          &lt;/InputGroupAddon&gt;
          // for testing the output
          &lt;h1&gt;{currentWeather.sys.country}&lt;/h1&gt;
        &lt;/InputGroup&gt;
        //the object wil be passed as props to other component for rendering the
        result
        &lt;FetchWeather search={currentWeather} /&gt;
      &lt;/Container&gt;
    );
  };
  
  export default Searchbar;
  </code></pre>
  <p>OpenWeatherAPI Response</p>
  <pre><code>    JSON : {&quot;coord&quot;:{&quot;lon&quot;:77.6,&quot;lat&quot;:12.98},&quot;weather&quot;:[{&quot;id&quot;:803,&quot;main&quot;:&quot;Clouds&quot;,&quot;description&quot;:&quot;broken clouds&quot;,&quot;icon&quot;:&quot;04n&quot;}],&quot;base&quot;:&quot;stations&quot;,&quot;main&quot;:{&quot;temp&quot;:297.51,&quot;feels_like&quot;:301.13,&quot;temp_min&quot;:295.15,&quot;temp_max&quot;:302.04,&quot;pressure&quot;:1010,&quot;humidity&quot;:100},&quot;visibility&quot;:6000,&quot;wind&quot;:{&quot;speed&quot;:3.45,&quot;deg&quot;:206},&quot;clouds&quot;:{&quot;all&quot;:75},&quot;dt&quot;:1593102591,&quot;sys&quot;:{&quot;type&quot;:1,&quot;id&quot;:9205,&quot;country&quot;:&quot;IN&quot;,&quot;sunrise&quot;:1593044734,&quot;sunset&quot;:1593091128},&quot;timezone&quot;:19800,&quot;id&quot;:1277333,&quot;name&quot;:&quot;Bengaluru&quot;,&quot;cod&quot;:200}
  </code></pre>