How to add classes in ReactJs dynamically?

Question

I want one class to be toggled on onClick, the functionality that i want is whenever i click on the one of the icon it's color should get changed, (default color will be same for the both the icons but whenever I click one of the icons a class will be added and according to that class color should get changed and when I click again that class should get removed.)

import "./App.css";
import { BsCloudRain } from "react-icons/bs";
import { GiForest } from "react-icons/gi";

function App() {

  return (
      <div id="container">
        <div id="icons">
          <BsCloudRain className="rain" />
          <GiForest className="forest" />
        </div>
      </div>
  );
}

export default App;

React.useState

kerelape
– kerelape

2022-07-03 04:18:56 +00:00
Commented Jul 3, 2022 at 4:18 — kerelape
– kerelape, Commented Jul 3, 2022 at 4:18

PsiKai · Accepted Answer · 2022-07-03 04:22:16Z

1

Add an onClick handler to your icon components. Then create a function that takes the event target and accesses the classList to toggle the class you want to add. This will remove the class when clicked again, if it's already on the list.

import "./App.css";
import { BsCloudRain } from "react-icons/bs";
import { GiForest } from "react-icons/gi";

function App() {
  const toggleClass = (e) => {
    e.target.classList.toggle("green")
  }

  return (
      <div id="container">
        <div id="icons">
          <BsCloudRain className="rain" onClick={toggleClass}/>
          <GiForest className="forest" onClick={toggleClass} />
        </div>
      </div>
  );
}

export default App;

answered Jul 3, 2022 at 4:22

PsiKai

1,9861 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ruakh · Accepted Answer · 2022-07-03 04:21:42Z

0

The className property, despite the name, isn't necessarily one class-name: it can be zero, one, or more class-names, separated by spaces. So if you have a boolean shouldIncludeRainClass, then you can write

<BsCloudRain className={shouldIncludeRainClass ? 'rain' : ''} />

to get className='rain' when the boolean is true and className='' (meaning "no class") when it's false.

answered Jul 3, 2022 at 4:21

ruakh

185k29 gold badges292 silver badges324 bronze badges

Collectives™ on Stack Overflow

How to add classes in ReactJs dynamically?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related