how can I add and remove a className from a react component using onclick()?

Issue

How can I delete and add a className from a component using onclick()?

In the example below I want click on the square and delete the className .red-square then add className .green-square using onclick()

Solution

import { useState } from "react";

const App = () => {
    const [isRed, setIsRed] = useState(true);

    const handleClick = () => setIsRed(!isRed);

    return <div 
               onClick={handleClick} 
               className={isRed ? "red-square" : "green-square"}>
           </div>
}

Answered By - Hadi El Yakhni