CODEWITHSUNDEEP
javascriptreactjs
Pranav
Pranav

Reputation: 1646

How to optimize code in repeated conditional rendering?

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?

Upvotes: 0

Views: 49

Answers (1)

Stepan
Stepan

Reputation: 1054

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] }

Upvotes: 2

Related Questions