title: Why is my state's value is always undefined?
body: <p>I've read all the question asked that similar to my problem , but  it still cant's solve my issues . I'm fetching datas from an api and assign it's values into my state , the program compiled successfully but this message appears in the browser &quot;TypeError: weatherData.main is undefined&quot;</p>
  <p>Here's my code</p>
  <pre><code>
  import './App.css';
  import React,{useEffect,useState} from 'react';
  
  
  function App() {
    const [weatherData,setWeatherData] = useState({});
    const [position,setPosistion] = useState({});
  
    useEffect(()=&gt;{
      navigator.geolocation.getCurrentPosition( pos =&gt; {
        setPosistion(()=&gt;{
          return {
            latitude : pos.coords.latitude,
            longitude : pos.coords.longitude
          }
        })
      });
    },[])
  
    useEffect(()=&gt;{
      fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&amp;lon=${position.longitude}&amp;units=metric&amp;appid=a*****5`)
          .then( res =&gt; res.json() )
          .then( resJson =&gt; {
            setWeatherData(()=&gt;resJson)
          })
    },[position]);
  
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Weather weatherData={weatherData} /&gt;
      &lt;/div&gt;
    );
  }
  
  const Weather = ({weatherData}) =&gt; {
    
    return(
      &lt;React.Fragment&gt;
        &lt;div className=&quot;location-time&quot;&gt;
          &lt;span id=&quot;location&quot;&gt;{weatherData.name}&lt;/span&gt;
        &lt;/div&gt;
        &lt;div className=&quot;weather&quot;&gt;
          &lt;span className=&quot;temp&quot;&gt;{`${weatherData.main.temp} C`}&lt;/span&gt;
          &lt;div className=&quot;icon&quot;&gt;&lt;/div&gt;
          &lt;div className=&quot;description&quot;&gt;{weatherData.weather[0].main}&lt;/div&gt;
          &lt;div className=&quot;low-max&quot;&gt;{`max : ${weatherData.main.temp_max} min : ${weatherData.main.temp_min}`}&lt;/div&gt;
          &lt;div className=&quot;feels-like&quot;&gt;{`feels like : ${weatherData.main.feels_like}`}&lt;/div&gt;
          &lt;button &gt;REFRESH&lt;/button&gt;
        &lt;/div&gt; 
      &lt;/React.Fragment&gt;
    )
  }
  
  
  export default App;
  
  </code></pre>
  <p>the state contains</p>
  <pre><code>{&quot;coord&quot;:{&quot;lon&quot;:106.8451,&quot;lat&quot;:-6.2146},&quot;weather&quot;:[{&quot;id&quot;:802,&quot;main&quot;:&quot;Clouds&quot;,&quot;description&quot;:&quot;scattered clouds&quot;,&quot;icon&quot;:&quot;03d&quot;}],&quot;base&quot;:&quot;stations&quot;,&quot;main&quot;:{&quot;temp&quot;:302.76,&quot;feels_like&quot;:307.06,&quot;temp_min&quot;:300.15,&quot;temp_max&quot;:305.93,&quot;pressure&quot;:1007,&quot;humidity&quot;:74},&quot;visibility&quot;:6000,&quot;wind&quot;:{&quot;speed&quot;:2.57,&quot;deg&quot;:340},&quot;clouds&quot;:{&quot;all&quot;:40},&quot;dt&quot;:1613038370,&quot;sys&quot;:{&quot;type&quot;:1,&quot;id&quot;:9383,&quot;country&quot;:&quot;ID&quot;,&quot;sunrise&quot;:1612997835,&quot;sunset&quot;:1613042198},&quot;timezone&quot;:25200,&quot;id&quot;:1642911,&quot;name&quot;:&quot;Jakarta&quot;,&quot;cod&quot;:200}
  </code></pre>