CodingNic

Build the Current Weather Experience

Handle Missing Weather Data

Build the Current Weather Experience 10 min read

Handle Missing Weather Data

Task

Keep rendering safe when optional weather fields are absent or a response is not ready.

File / section

src/App.jsx and src/components/CurrentWeather.jsx

Change

Keep the top-level condition weather && forecast for the completed dashboard. Inside current weather, rely on the known OpenWeather structure only after a successful response. Do not render CurrentWeather before weather exists.

Why this change matters

The safest fix for this project is to gate the component at the app boundary rather than scatter optional chaining through every display.

Test it

Reload the app with no search and confirm the welcome state renders without errors. Then search a valid city.

Checkpoint

The dashboard never tries to render current-weather fields before data exists.