CODEWITHSUNDEEP
reactjs
Thinker
Thinker

Reputation: 5356

react classNames using two conditional classes

I have a div as following:

<div className={classNames("div-one",
    {"half-width": this.state.showRegistration || this.state.showLogin})}>
</div>

What I want is: on !this.state.showRegistration || !this.state.showLogin this condition I want append "full-width" class to div-one instead of "half-width"

How can I achieve this?

Upvotes: 0

Views: 339

Answers (2)

Aksana Tolstoguzova
Aksana Tolstoguzova

Reputation: 369

const resultClass = {this.state.showRegistration || this.state.showLogin ? 'half-width' : 'full-width'};
<div className={classNames("div-one",
    [resultClass]: true }>
</div>

Upvotes: 0

Sulthan
Sulthan

Reputation: 130102

!this.state.showRegistration || !this.state.showLogin

is not the negation of

this.state.showRegistration || this.state.showLogin

The proper negation would be !this.state.showRegistration && !this.state.showLogin.

But I guess you want something like this:

const registrationOrLogin = this.state.showRegistration || this.state.showLogin;

const classes = classNames("div-one", {
    "half-width": registrationOrLogin,
    "full-width": !registrationOrLogin
})

<div className={classes}}>
</div>

or

const classes = `div-one ${registrationOrLogin ? "half-width" : "full-width"}`;

Upvotes: 1

Related Questions