Konstantin Münster
1 min readDec 29, 2019

--

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 :)

--

--

Konstantin Münster
Konstantin Münster

Written by Konstantin Münster

Writing about Web Development and Freelancing. // konstantin.digital

No responses yet