Mini build: a weekly forecast
Build the forecast from the week array. Use week.map(...) to create the rows (you'll study lists properly in Phase 3; here, each item needs a key).
Render a <dl className="week" aria-label="Weekly forecast"> that contains only <dt>/<dd> pairs, no wrapper elements: a <dt> with the day name and a <dd> for each day.
Each <dd> contains an SVG icon with aria-hidden="true" (use the SunIcon component provided, fixing its attributes) followed by the temperature as text like 31°C. Give each <dd> a data-temp attribute with the number, and the class hot when the temperature is 30 or more.
The console must show no React warnings.
What Check tests
- The
<dl>holds onlydt/ddpairs, one per day - The list is labelled
Weekly forecast - Each day shows its temperature like
31°C - Each
ddhas a hidden SVG icon data-tempholds the number and only 30°C or more ishot- The console has no React warnings
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.