if else condition using classNames

Question

There's a package called classNames. I try to use it to hide show when a user switch tab, can I pass in the expression like this instead of using a flag checking true or false?

<div className={classNames("tab", {(this.state.selectedTab === 2), "hide"})}> //content </div>

But above code won't work.

try this: className={classNames("tab", {"hide": this.state.selectedTab === 2})} — Mayank Shukla
– Mayank Shukla, Commented Apr 18, 2017 at 7:42
Yes, but the condition is the last thing. Is an object where the keys are the classes and the values are the condition for each class. So should be something like: classNames("tab", {"hide": this.state.selectedTab === 2}) — aabilio
– aabilio, Commented Apr 18, 2017 at 7:43
that is a lot of overhead code to accomplish className={ this.state.selectedTab === 2 ? "tab hide" : "tab" } — Kyle Richardson
– Kyle Richardson, Commented Apr 18, 2017 at 7:58

Mayank Shukla · Accepted Answer · 2017-04-18 07:45:26Z

I think, you can use it like this:

className={classNames("tab", {"hide": this.state.selectedTab === 2})}

Reason is, key will be the the name of class and in place of value you can use any condition which will return true or false, if condition will be true then hide will be applied otherwise it will get ignored.

Collectives™ on Stack Overflow

if else condition using classNames

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related