react classnames if else

Question

I changed my file Order.css to Order.module.css. And now I need to transform this condition from

const firstNameClass = firstNameInputHasError ? 'form-control invalid' : 'form-control'; ... <div className={firstNameClass}> ... </div>

in something like this

 const firstNameClass = firstNameInputHasError ? classes['form-control'] + classes['invalid'] : classes['form-control'];

first-line works fine when the name of the file is Order.css. The second line doesn't work.

Updated. Thanks to chenc that recommended classnames package

My solution

import classes from './Order.module.css'; import classNames from "classnames/bind"; let classNameBound = classNames.bind(classes); const firstNameClass = classNameBound( classes["form-control"], {invalid: firstNameInputHasError} );

Second solution without classnames package

const firstNameClass = `${classes["form-control"]} ${firstNameInputHasError ? classes.invalid : ''}`;

The second line doesn't work how?

Nick
– Nick

2021-09-08 02:16:02 +00:00
Commented Sep 8, 2021 at 2:16 — Nick
– Nick, Commented Sep 8, 2021 at 2:16

chenc · Accepted Answer · 2021-09-08 02:30:11Z

2

why not use classnames ? This is a good package for judging conditions to use class

answered Sep 8, 2021 at 2:30

chenc

3311 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Julien Over a year ago

Would look lie this, className={classNames(classes['form-control'], { classes['invalid']: firstNameInputHasError })}>

Ryan Le · Accepted Answer · 2021-09-08 02:20:50Z

It should be in a function, and you don't need to use a +:

const firstNameClass = firstNameInputHasError ? classes(["form-control invalid"]) : classes(["form-control"]);

Or in short:

const firstNameClass = classes(["form-control", { 'invalid': firstNameInputHasError } ]);

Collectives™ on Stack Overflow

react classnames if else

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related