Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
In this article, we are going to see that how to add and remove class in react JS onClick event. So as we know in JavaScript, adding and removing classes is pretty easy since we have direct methods. But doing the same thing is not that hard to do, also there are some multiple ways to do this. So let’s see one by one and learn them.
How to Add And Remove Class in React JS onClick
Follow these Simple steps to work with one or two classes:
- Create an element, e.g. button.
- Put onClick event listener on this element.
- Store active state or any class you want in the state.
- Use condition to add or remove classes.
Now we have to add a button with onClick event in which we are calling a clickHandler function. Then we have imported useState hook, and we have created a isClass State with initial value false. Now in clickHandler function we are just setting reverse value of current. So that each time we click the button, the value of current will change and alternatively, the value of isClass state will be changed.
Now in button, we need to change classes when button gets clicked. For that, we used a conditional operator where isClass is true then bg-green will be assigned to the button, otherwise no class will be assigned.
import {useState} from 'react';
import './App.css';
function App() {
const [isClass, setIsClass] = useState(false);
const clickHandler = (e) => {
setIsClass(CurrentStatus => !CurrentStatus);
};
return (
<div>
<button className={isClass ? 'bg-green' : ''} onClick={clickHandler}>
Click Me
</button>
</div>
);
}
export default App;
CSS file:
.bg-green{
background-color: green;
color: aqua;
}
The above method is pretty easy to implement and understand, but here we have to use a useState hook and a conditional operator to change classes.
There is Another way to change classes without any hook or conditional operator. We are talking about event object.
In the below code, we just added the same code to do the same operation as above. Here, we have a button of course on which we applied onClick event listener to handle event. In the function, we have simply applied this event.currentTarget.classList.toggle('bg-green') method, in this we used currentTarget which will give us access to that element of DOM, on which we applied event listener.
Also toggle will be helpful to switch classes, here we have only one class attached so when the button gets clicked then bg-green class will assign or remove it on every second click. This gives the same result as the above code.
import './App.css';
export default function App() {
const ClickHandler = (e) => {
event.currentTarget.classList.toggle('bg-green');
};
return (
<div>
<button onClick={ClickHandler}>Click Me</button>
</div>
);
}
You can also switch between classes, where you want to change more than one class. For that, we can use toggle() with multiple classes, each time we click the button class will be changed. For example, at first click bg-green will be assigned, at second time my-class-2 will be assigned and at third time my-class-3 will be assigned. You can add many classes you want.
event.currentTarget.classList.toggle(
'bg-green',
'my-class-2',
'my-class-3',
);
event.currentTarget.classList.add() is also another way to assign class to the element, but it will add class when class is not already present in the element. So it will only add one class to an element.
event.currentTarget.classList.add(
'bg-green',
'my-class-2',
'my-class-3',
);
If you want to remove a class manually, then we can use the event.currentTarget.classList.remove() method to remove a particular or group of classes from the element. It simply ignores those elements which do not have any classes, and it removes those classes which are present in the element.
event.currentTarget.classList.remove(
'bg-green',
'my-class-2',
'my-class-3',
);
You may Also like:
