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?
Add a comment
|
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} />
Comments
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'})
}
4 Comments
Gosha A
Ouch. This doesn't look clean at all. Why would you store such a presentation detail in state? Following the example in the question, state/props could contain
isRed, which should toggle a class. Picking a class to use then should happen inside render() only.
Shanky Munjal
<div class={this.state.styleClass}></div> would be part of render only. In reactJS there is no presentation layer. There is component only. If there is some variable in your component means there is something that could change then you need state for that.
Gosha A
What I mean is, state is for storing just that — the state, like if something is toggled, or something. Presentation — including class names, is then derivable from that state and props. Class names themselves don't belong in the state. Also doesn't make it clear where it comes from.
this.state.isExpanded ? "class1" : "class2" is million times more legibleShanky Munjal
Lets say there are 5 different classes that can be used then we can not use boolean state. So to make it consistent I generally prefer this way.
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.
1 Comment
abarisone
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge.
