Updating view based on API response - react-native

Question

I'm having an issue with showing information in my App.js state object in a child component. Below are the relevant parts. App.js, WeatherDetail is the aforementioned component, and then the response from API request.
App.js
import React from "react";
import openweather from "../api/openweather";
import SearchBar from "./SearchBar";
import WeatherDetail from "./WeatherDetail";
class App extends React.Component {
state = { weather: [], daily: [] };
onSearchSubmit = async zip => {
const currentWeather = openweather.get("/data/2.5/weather", {
params: { zip }
});
const fiveDayForecast = openweather.get("/data/2.5/forecast", {
params: { zip }
});
const [weather, daily] = await Promise.all([
currentWeather,
fiveDayForecast
]);
this.setState({ weather: weather.data, daily: daily.data.list });
};
render() {
return (
<div>
<SearchBar onSubmit={this.onSearchSubmit} />
<WeatherDetail weather={this.state.weather} />
</div>
);
}
}
export default App;
WeatherDetail.js
const WeatherDetail = ({ weather }) => {
return (
<div>
<h1>Today</h1>
<h3>City: {weather.name}</h3>
<h5>Temperature:</h5>
</div>
);
};
>forecast:
base: "stations"
>clouds: {all: 75}
cod: 200
>coord: {lon: -82.54, lat: 40.7}
dt: 1553023267
id: 420031370
>main:
humidity: 45
pressure: 1030
temp: 44.22
temp_max: 46.99
temp_min: 41
name: "Elyria"
Now, weather.name shows up in the view with no problem. If I try to grab any information deeper than that I get an error saying the property is undefined. For example, weather.main.temp is how I thought I would get the temperature but it shows that error. weather.main alone gives an obvious error, but it shows the object I'm trying to access in the message. So I'm confused about how that can be when weather.main.temp also says the property (main) is undefined. Am I trying to access the object incorrectly or is something else set up wrong?

Answer 1

The problem comes with the initial render, before you have received results from the API. The first time WeatherDetail renders, it has the default state, which you've set to state = { weather: [], daily: [] };. This means that on initial render there is no main attribute existing on state.weather. It's just an empty array. The attributes only exist when you populate them on running onSearchSubmit.
I would add some validation in your WeatherDetail component. Something like the below:
const WeatherDetail = ({ weather }) => {
const { name, main } = weather;
return (
<div>
<h1>Today</h1>
<h3>City: { name ? name : ''}</h3>
<h5>Temperature: { main ? main.temp : '' }</h5>
</div>
);
};
That way on initial render if the attributes don't exist you can still render empty strings, and when the state gets populated and the correct attributes exist, it will render the correct content.