CodingNic

Units & Preferences

Add Unit State

Units & Preferences 10 min read

Add Unit State

Task

Create the metric/imperial preference in the app shell.

File / section

src/App.jsx

Change

Use const [unit, setUnit] = useState("metric");. Pass unit to Header, CurrentWeather, WeatherStats, and Forecast.

Why this change matters

The unit is application-level state because multiple components need the same value.

Test it

Confirm the app still builds and all affected components receive the prop.

Checkpoint

WeatherNow has one shared unit preference.