React-Weather | Simple react web application for weather info | Frontend Framework library

I make an api call to openWeatherapi but the issue is the data is "undefined" until it has resolved. So when i make the api call in ComponentDidMount and set the data to state, state is undefined for a bit until the data comes in. The issue is that in the meantime if i try to do anything with the data i get cannot "Dosomething" of propriety of undefined and the whole thing crashes. How do i get around this?

I have a weatherwidget and i want to pass the weather data from the api call. The city name includes the continent, so if i want to do .split() on it, i get an error because the value is undefined at first.

Here's the dashboard code

I have cloned this project https://github.com/LaurenceHo/react-weather-app#webpack-reactjs-and-typescript

I have followed all the steps correctly, i have created my new Key here https://api.windy.com/keys in Map Forecast API and put as instruction here https://github.com/LaurenceHo/react-weather-app/blob/master/src/views/weather-map.tsx

Now I run the server and i get this error for this method getWeather

I look up in my Network and Console, these are the errors i can see, but i don not get how i can fix it

This is the api with the method

I am getting confused. Having a self written component, using react-weather installed via npm as the following:

My Weather.js components in (src/components folder)

New to react and was following a tutorial creating this component. (https://github.com/owenchak/react-weather). I'm using gulp to test everything locally. How do I use my component in an actual website I'm trying to create? I instructed gulp to create a style.css (containing all the sass files), main.js containing the interpretable jsx and index.html that contains all these files.