How to reduce complexity of 27 by replacing if/else block to something else in React

Question

I have a weather display with emojis adjusted by if/else statement, but there is a major delay evidently since the complexity is 27, how do I replace such method with a replacement that would reduce complexity?

Sort of new to front-end world, any help is much appreciated.

  function drawWeather( d ) {
  var celcius = Math.round(parseFloat(d.main.temp)-273.15);
  var fahrenheit = 
  Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32);
  var main_description = d.weather[0].main; 
  var description = d.weather[0].description; 

  var day_time = isDay()

  document.getElementById('location').innerHTML = d.name;

  if       ( main_description === 'Clear' && day_time == true) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ☀️';
  } else if ( main_description === 'Clear' && day_time == false) 
  {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' 🌔';
  } else if( main_description === 'Clouds' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ☁️';
  } else if( main_description === 'Drizzle' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' 🌦️';
  } else if( main_description === 'Rain' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' 🌧️';
  } else if( main_description === 'Thunderstorm' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ⛈️';
  } else if( main_description === 'Snow' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' ❄️';
  } else if( main_description === 'Fog' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' 🌫️';
  } else if( main_description === 'Mist' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' 🌫️';
  } else if( main_description === 'Haze' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' + ' 🌫️';
  } else if( main_description === 'Tornado' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' 
  + ' 🌫️';
  } else if( main_description === 'Dust' ) {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°' 
   + ' 🌫️';
  } else {
  document.getElementById('temp').innerHTML = fahrenheit + 
  '°';
  }
  }

Answer 1

1. At least show your effort that you do work with the code but can't find a way to go

2. Post a formatted code to show your respect with the community

3. This is a topic of "DRY - Don't Repeat Yourself" in programming. You can search with that keyword and learn it.

4. The code below is what I can do but untested.

let data = [
    { weather: 'Clear', icon_day: '☀️', icon_night: '🌔' },
    { weather: 'Clouds', icon: '☁️' },
    { weather: 'Drizzle', icon: '🌦️' },
    { weather: 'Rain', icon: '🌧️' },
    { weather: 'Thunderstorm', icon: '⛈️' },
    { weather: 'Snow', icon: '❄️' },
    { weather: 'Fog', icon: '🌫️' },
    { weather: 'Mist', icon: '🌫️' },
    { weather: 'Haze', icon: '🌫️' },
    { weather: 'Tornado', icon: '🌫️' },
    { weather: 'Dust', icon: '🌫️' }
]

let icon = '';
data.forEach(element => {
    if (main_description === 'Clear') {
        icon = isDay() ? element.icon_day : element.icon_night
    } else if (main_description === element.weather) {
        icon = element.icon;
    }
});

document.getElementById('temp').innerHTML = `${fahrenheit}° ${icon}`;