How to optimize code in repeated conditional rendering?

Question

In my project I have repeated piece of code in conditional rendering. If its reduced the code is optimized.The weather icon is displayed based on weather description from API. See the below code for reference.

Weather.js

{ (time >= sunsetTime || time <= sunriseTime) ? 
                    /* Night Weather Description */
                    props.description == 'Haze' ? <Haze/>: 
                    [props.description == 'Light rain' ? <LightRain/> : 
                    /* Only 3 decription are different */
                    /* 1. The first one */
                    [props.description == 'Overcast clouds' ? <OvercastCloudsNight/> :
                    /* 2. The second one */ 
                    [props.description == 'Clear sky' ? <ClearSkyNight/> :
                    [props.description == 'Few clouds' ? <BrokenClouds/> : 
                    [props.description == 'Scattered clouds' ? <ScatteredClouds/> : 
                    [props.description == 'Broken clouds' ? <BrokenClouds/> : 
                    [props.description == 'Shower rain' ? <LightRain/> : 
                    /* 3. The last one */
                    [props.description == 'Rain'? <NightRain/>:
                    [props.description == 'Drizzle'? <LightRain/>: 
                    [props.description == 'Thunderstorm' ? <ThunderRain/>: 
                    [props.description == 'Snow' ? <Snow/>: 
                    [props.description == 'Mist' ? <Haze/>:
                    [props.description == 'Freezing rain' ? <FreezingRain/>: 
                    [props.description == 'Smoke' ? <Haze/>: 
                    [props.description == 'Heavy intensity rain' ? <ThunderRain/> :
                    [props.description == 'Moderate rain' ? <ModerateRain/> :
                    [props.description == 'Light intensity drizzle' ? <LightRain/>:
                    [props.description == 'Light intensity shower rain' ? <LightRain/>:
                    [props.description == 'Thunderstorm with rain' ? <ThunderRain/>:
                    [props.description == 'Thunderstorm with light rain' ? <ThunderLightRain/>:
                    [props.description == 'Very heavy rain' ? <ThunderLightRain/>:'']
                    ]]]]]]]]]]]]]]]]]]]]    
                    :
                    /* Day Weather Description */
                props.description == 'Haze' ? <Haze/>: 
                [props.description == 'Light rain' ? <LightRain/> : 
                [props.description == 'Overcast clouds' ? <OvercastClouds/> : 
                [props.description == 'Clear sky' ? <ClearSky/> :
                [props.description == 'Few clouds' ? <BrokenClouds/> : 
                [props.description == 'Scattered clouds' ? <ScatteredClouds/> : 
                [props.description == 'Broken clouds' ? <BrokenClouds/> : 
                [props.description == 'Shower rain' ? <LightRain/> : 
                [props.description == 'Rain'? <SunnyRain/> :
                [props.description == 'Drizzle'? <LightRain/>: 
                [props.description == 'Thunderstorm' ? <ThunderRain/>: 
                [props.description == 'Snow' ? <Snow/>: 
                [props.description == 'Mist' ? <Haze/>:
                [props.description == 'Freezing rain' ? <FreezingRain/>: 
                [props.description == 'Smoke' ? 'Its smoke': 
                [props.description == 'Heavy intensity rain' ? <ThunderRain/> :
                [props.description == 'Moderate rain' ? <ModerateRain/> :
                [props.description == 'Light intensity drizzle' ? <LightRain/>:
                [props.description == 'Light intensity shower rain' ? <LightRain/>:
                [props.description == 'Thunderstorm with rain' ? <ThunderRain/>:
                [props.description == 'Thunderstorm with light rain' ? <ThunderLightRain/>:
                [props.description == 'Very heavy rain' ? <ThunderLightRain/>:'']
                ]]]]]]]]]]]]]]]]]]]]
                }

As you can see in the comments above, only those mentioned are unique rest all descriptions are repeated. So any appropriate solution to optimize the code?

Feels like you need a WeatherIcon component with a description/type and time prop. A switch case inside this component to render the correct icon and a condition to check for day or night. — maazadeeb
– maazadeeb, Commented Nov 28, 2019 at 17:35

Stepan · Accepted Answer · 2019-11-28 17:49:13Z

2

You can create an object (aka dictionary) like this:

var base_dict = {'Haze': (<Haze/>), 'Light rain': (<LightRain/>), 
//...
}
var day_dict = {'Overcast clouds': (<OvercastCloudsNight/>), 'Clear sky': (<ClearSkyNight/>), 'Rain': (<NightRain/>)}
var night_dict = {'Overcast clouds': (<OvercastClouds/>), 'Clear sky': (<ClearSky/>), 'Rain': (<SunnyRain/>)}
Object.assign(day_dict, base_dict);
Object.assign(night_dict, base_dict);

and then use this objects:

{ (time >= sunsetTime || time <= sunriseTime) ? day_dict[props.description]: night_dict[props.description] }

answered Nov 28, 2019 at 17:49

Stepan

1,0541 gold badge7 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to optimize code in repeated conditional rendering?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related