Change classname dynamiclly in React-CodePudding

hello im trying to change a class name dynamiclly in react

i am importing the classes from a realted css file like this

import classes from "./Board.module.css";

and in my Board componnet i want to return a classname based on somthing i genarate it can be "card" "card activate " "card disable" and i have 3 class in my css file

.card{
do card somthing

}
.card.activate{
do card  activate somthing

}
.card.disable{
do card disable somthing

}

how can i do it becuase concateing dosent seem to be working

edit: I am trying to to this:


import  "./Board.module.css"

const Card = (props) => {
  const itemClass =
    "card"   (props.item.stat ? " active "   props.item.stat : "");
  return (
    <div className={itemClass} onClick={() => props.clickHandler(props.id)}>
      <label>{props.item.content}</label>
    </div>
  );
};

export default Card;

and the CSS is :

.card.wrong{
    background-color: red;

}
.card.correct{
    background-color: green;
}
.card.active{
    transform: rotateY(0);
}

i am doing so that every time i click a card i change its class name to active and somthing and base on that i do a color but the class is undifined so i dont know what to do

CodePudding user response：

To change a class name dynamically in React, you can use the classnames package. Here's an example of how you could use it:

import classnames from 'classnames';
import classes from './Board.module.css';

const Board = () => {
  const className = classnames(
    classes.card,
    {
      [classes.activate]: isActive,
      [classes.disable]: isDisabled,
    }
  );

  return (
    <div className={className}>
      ...
    </div>
  );
};

In this example, className will be set to card by default. If isActive is true, then className will be set to card activate. If isDisabled is true, then className will be set to card disable. You can add additional conditions to specify different class names based on your specific needs.

CodePudding user response：

Have you tried looking the element in inspect mode to see whether the classes are getting attached without spaces?

Eg. card active is getting applied as cardactive.

However, here's how you'd do it :

// Board.module.css
.card{
do card somthing

}
.card.activate{
do card  activate somthing

}
.card.disable{
do card disable somthing

}

Here's a snippet of the component which uses the classes dynamically. A dummy condition is used to simulate the truthy/falsy behavior that changes the class. Replace this using your custom logic.

Using string literals you can dynamically toggle between the classes as shown below:

import "./Board.module.css";

const MyComponent = () => {
const [condtion, setCondition] = useState(false); // this is the condition that toggles the class
return (
<>
 <span className={`card ${condition ? 'activate' : 'disable'}`}>Hello world</span>
</>

Note: the activate and disable class-Names are strings and not variables.