Search⌘ K
AI Features

Use Weather Data

Explore how to use weather data in a React app by extracting properties from API responses. Understand optional chaining to handle missing data safely and convert raw values into readable units. This lesson enables you to build a dynamic weather display with error prevention and prepares your Pretty Sunny project for completion.

Let’s use the data prop from the last lesson to display the city’s weather information. The data received from the API is in the form of objects, as we saw in the console in the Use InputCity Component lesson. As a result, each piece of information used in this component is a property of the data object. The following snippets show how we extract and use the different properties from the data object. Let’s destruct the data object in the parameter itself.

const ShowWeather= ({ data }) =>{
   ...
}

Optional chaining

We’ll employ the ternary operator here, though we don’t use it to get the value of the properties from our ...