Toggle Css Class in React
How to Toggle a Presence of Css Class on Element in React with Boolean Value? in Angular 2 I Could Just Do [Class. Red]="Isred". How to Do Familiar Thing in...
How to toggle a presence of css class on element in React with boolean value? In Angular 2 I could just do [class.red]="isRed". How to do familiar thing in React?
3 Answers
In React, elements get their classes using a syntax like this
<div className="some-class" />
Note however that JSX allows attribute values to be JS expressions
<div className={"some-" + "class"} />
Which can be used generate a class name based on some logic, such as your boolean check
<div className={isRed ? "red" : null} />
If your element should also has some classes that don't depend on a variable and should always be applied, this can be achieved with
<div className={"my-class " + (isRed ? "red" : null)} />
At which point it seems to start to get messy and it's probably better to extract that into a local variable instead
var className = "my-class " + (isRed ? "red" : null);
<div className={className} />
React itself doesn't provide an utility function to deal with this, however the boolean pattern is so common, there is a package called classnames that will turn the above into
var className = cx("my-class", { "red": isRed });
<div className={className} />
You can use state for that.
<div className={this.state.styleClass}></div>
On any event you can change the class like
handleClick: function(){
this.setState({styleClass: 'red'})
}
Toggle css class in React
<div className={isRed && "red"}></div>
let isRed = true;
//result
<div class="red"></div>
let isRed = false or null or undefined or "" or 0;
//result
<div class=""></div>
if there is another class u may use
<div className={"element "+ (isRed ? "red":"")}></div>
or put result in varaiable
let modificator = isRed ? "red":"";
<div className={"element "+ modificator}></div>
the same with open/close classes
let modificator = isOpen ? "open" : "close";
<div className={"element "+ modificator}></div>
if you want to not render some element
{isShow && <div className="element"></div> }
It is common practice ,using logic and ternary operators for that.
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
