Hi Chris, thanks for your feedback!
In this case, the conditional rendering is based on the weather description which we are retrieving from the API. If you inspect the API response, you see that there is one property weather[0].main
that contains a single-word description like “Thunderstorm”, “Drizzle”, …
We are passing down this property to the Icon component. There, we use it to build the image src path.
src={require(`../../assets/images/${props.type}.svg`)}
(props.type is the weather[0].main
property)
Of course, this isn’t perfect because our image file name is depending on the API property and we have to make sure that both always match. However, it is a simple way to make the conditional rendering work, though. If you have any further questions, let me know :)