Frontend Introduction to React

Walkthrough: Icons and Dates 💡

Solution

Icons

1. Formatting the icon.

... 
import iconData from './iconData.json';
 
const weatherCode = icon.slice(0,1) + "00";
 
<div className="forecast-summary__icon" data-testid="forecast-icon">
  <img src={iconData[weatherCode]} />
</div>

2. Dates

There are many different libraries out there for manipulating dates in JavaScript but for our purposes the native JS Date object will suffice.

const formattedDate = new Date(date).toDateString();

Then replace date with formattedDate, as follows:

<div className="forecast-summary__date">
  {formattedDate}
</div>

3. Update your tests.

Don't forget to update your tests to assert that a correctly formatted date is returned.

Previous

Icons and Dates

Next

Icons and Dates - troubleshooting tests 🔬

On this page

1. Formatting the icon.

3. Update your tests.