Add The Dynamic Background

We’ll now add a dynamic background to the ShowWeather component that changes color based on the value of the tempInCelcius variable.

Change color with respect to temperature

In our background, we give three breakpoints:

• If tempInCelcius is less than 10
• If tempInCelcius is greater than 10 but less than or equal to 30
• If tempInCelcius is greater than 30

We add three colors for these three breakpoints. Feel free to add any color. To make it functional, we use the useState hook to track the state. We also use the useEffect hook to call the dynamicBackground function each time the tempInCelcius changes. The following snippet shows how to create the dynamicBackground function: