To switch between colors we need logic to handle that.
For example:-
At the top of your component, import the useState Hook, which helps to define a state.
import { useState } from "react";
Let’s define a state with default color black
const [bgColor, setBgColor] = useState(“black”);
Now, we’ll declare a div container
Transition property will give smooth effect while color changes
<div style={{ backgroundColor:bgColor, transition: "all .5s ease" }}
></div>
Clicking the respective button will change the container background colour
<button onClick={()=>{setBgColor(‘green’)}}>Green</button
<button onClick={()=>{setBgColor(red)}}>Red</button
<button onClick={()=>{setBgColor(blue)}}>Blue</button
Support On Demand!
