I'm working on a button that I've defined like this:
<button className={class} onClick={() => changeClassProperty()}>
{classText}
</button>
My goal is to update both the CSS styling class and the text of the button A when it's clicked. Currently, I'm using the UseState hook in the following way:
const [classColor, setClassColor] = useState(styles.classAButton);
const [classText, setClassText] = useState("A");
The handler changeClassColor() is responsible for updating the CSS color style and the text of my button like this:
function changeClassProperty() {
setClassColor(styles.classBButton);
setClassText("B");
}
So, clicking on button A changes its color and text to button B. Now, I want to toggle between states A and B with each click. How can I achieve this?