Add Error Handler

Learn to handle the errors from the API.

We'll cover the following

Add the error handling

It’s now time to add error handling to the App.js file. When a user enters an invalid city name, our API should return an error instead of the property. In that scenario, the error message should be displayed instead of the ShowWeather component. All the error state functionality was included in the last lesson. To display the ShowWeather and error, we should use the ternary operator. The following code snippet shows how to add the error and ShowWeather by using the ternary operator:

{error ? (
  <h3 className="error">No data found :( </h3>
) : (
  <ShowWeather data={weatherData} />
)}

We can now add this in the following widget:

Get hands-on with 1400+ tech skills courses.