react useState and useEffect quickie

Question

I'm trying to convert an older style react class to a newer function that uses useState and useEffect instead of this.setState and componentDidMount but can't get it to quite work - can anyone help me see what I'm doing wrong - finding hooks quite confusing - thanks

import React,{useState,useEffect} from 'react';

const App = function() {
  function  getWeather(){
      fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=6e93b3d15872f914c6929fed9ea71e9a')
        .then(data => data.json())
        .then(data => {
            return data
        })
  
  }
  const[weatherData,setData] = useState(getWeather())

  useEffect(()=>{
    setData(getWeather)
  },[])
  
    
    return(<div>
    
    {weatherData.main.temp}
    
    </div>)
  
}

export default App;

BTSM · Accepted Answer · 2021-04-09T13:04:13.040

1

Please try like this.

import React,{useState,useEffect} from 'react';

const App = function() {
  function  getWeather(){
      fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=6e93b3d15872f914c6929fed9ea71e9a')
        .then(data => data.json())
        .then(data => {
            setData(data);
        })
  
  }
  const[weatherData,setData] = useState([])

  useEffect(()=>{
    getWeather();
  },[])
  
    
    return(<div>
    
    {weatherData.main?weatherData.main.temp:""}
    
    </div>)
  
}

export default App;

edited Apr 09 '21 at 13:04

answered Apr 09 '21 at 12:49

BTSM

1,585
8
12
26

thanks I tried that but get the error TypeError: undefined is not an object (evaluating 'weatherData.main.temp') – Ron Southin Apr 09 '21 at 13:02
Sorry. I edited my answer. Please try again. – BTSM Apr 09 '21 at 13:04
thank you so much but could you explain what this line is doing with the question mark and quotes? {weatherData.main?weatherData.main.temp:""} – Ron Southin Apr 09 '21 at 13:15
If weatherData.main is not null, we can display weatherData.main.temp, but weatherData.main is null we can't evaluate the weatherData.main.temp. – BTSM Apr 09 '21 at 13:18
So I added that line. – BTSM Apr 09 '21 at 13:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/230942/discussion-between-etsuko-susui-and-ron-southin). – BTSM Apr 09 '21 at 13:21
I can't post comments in the chat - maybe because I'm on safari? – Ron Southin Apr 09 '21 at 13:27

react useState and useEffect quickie

1 Answers1