Add The Dynamic Background
Learn to add the dynamic background.
We'll cover the following
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:
Get hands-on with 1200+ tech skills courses.