Borislav Hadzhiev
Wed Apr 27 2022·3 min read
Photo by Alexis Antoine
To change the style of an element on click in React:
onClick
prop on the element.import {useState} from 'react'; export default function App() { const [isActive, setIsActive] = useState(false); const handleClick = () => { // 👇️ toggle setIsActive(current => !current); // 👇️ or set to true // setIsActive(true); }; return ( <div> <button style={{ backgroundColor: isActive ? 'salmon' : '', color: isActive ? 'white' : '', }} onClick={handleClick} > Click </button> </div> ); }
We set the onClick
prop on the element, so every time it is clicked, the
handleClick
function is invoked.
In our handleClick
function, we simply toggle the isActive
state.
setIsActive(true)
, if you don't want to change the styles every time the element is clicked.We used a
ternary operator
to conditionally set the backgroundColor
style on the element.
<button style={{ backgroundColor: isActive ? 'salmon' : '', color: isActive ? 'white' : '', }} onClick={handleClick} > Click </button>
The ternary operator is very similar to an if/else
statement.
In other words, if the isActive
variable stores a true
value, we set the
backgroundColor
property to salmon
, otherwise set it to an empty string.
Alternatively, you can use the currentTarget
property on the event
object.
To change the style of an element on click in React:
onClick
prop on the element.event.currentTarget
.style
object to set styles on the element.export default function App() { const handleClick = event => { event.currentTarget.style.backgroundColor = 'salmon'; event.currentTarget.style.color = 'white'; event.currentTarget.classList.add('my-class-1', 'my-class-2'); }; return ( <div> <button onClick={handleClick}>Click</button> </div> ); }
We can access the element via the currentTarget
property of the event
object.
The currentTarget
property on the event
gives us access the element that the
event listener is attached to.
Whereas the target
property on the event
gives us a reference to the element
that triggered the event (could be a descendant).
toggle
the styles of an element on click, conditionally check if the styles are present.export default function App() { const handleClick = event => { // 👇️ toggle styles on click if (event.currentTarget.style.backgroundColor) { event.currentTarget.style.backgroundColor = null; event.currentTarget.style.color = null; } else { event.currentTarget.style.backgroundColor = 'salmon'; event.currentTarget.style.color = 'white'; } // 👇️ toggle class on click event.currentTarget.classList.toggle('my-class-1', 'my-class-2'); }; return ( <div> <button onClick={handleClick}>Click</button> </div> ); }
If you need to set a style on the element on click, you can directly set the
style via the element's style
object.
event.currentTarget.style.backgroundColor = 'salmon';
However, if you have to toggle the style every time the element is clicked, you have to conditionally check if the class is present and remove it if it is, otherwise add the class.
If you need to add a class to the element, use the classList.add method.
// 👇️ add class event.currentTarget.classList.add('my-class-1', 'my-class-2'); // 👇️ remove class event.currentTarget.classList.remove('my-class-1', 'my-class-2');
The method can be passed one or more classes.
If you need to toggle a class on an element on click, use the classList.toggle method.
event.currentTarget.classList.toggle('my-class-1', 'my-class-2');
The classList.toggle
method removes an existing class from the element if the
class is present. Otherwise, it adds the class to the element.