conditional className in React?

Question

May be a subtle problem, but i don't like the way it appears when i inspect elements in the browser

Sometimes i need to add a class to an element in react using ternary operator and that may leave some space when the condition returns false

for exampe:

<div className={`container ${some condition ? 'bg-green' : ''}`}

when condition is true, the class is added to the div but when it is false, there is an ugly space shown in the element when inspect

<div class="container  ">

Is it acceptable?? or a bad practice??, is there a good solution for it?

Balastrong · Accepted Answer · 2020-06-07 14:36:02Z

16

That shouldn't be a big issue, but you can remove the space before the ternary operator (and add it in the .bg-green branch)

<div className={`container${some condition ? ' bg-green' : ''}`}

I haven't tried, but you might add a .trim() as well like below, but I don't think you need it.

<div className={`container${some condition ? ' bg-green' : ''}`.trim()}

Demo:

console.log(`"container${true ? ' bg-green' : ''}"`)
console.log(`"container${false ? ' .bg-green' : ''}"`)

edited Jun 7, 2020 at 14:36

answered Jun 7, 2020 at 14:30

Balastrong

4,4602 gold badges14 silver badges32 bronze badges

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

4 Comments

Code Eagle Over a year ago

{`container${some condition ? ' bg-green' : ''}`} in that way container class won't work at all!!

Balastrong Over a year ago

What about plan B? <div className={`container ${some condition ? 'bg-green' : ''}`}.trim()

Code Eagle Over a year ago

yes, that way worked, but i had to move trim() inside the curly brackets <div className={`container ${some condition ? 'bg-green' : ''}`trim()}. Thank you

Code Eagle Over a year ago

now i see the two methods works perfectly, i didn't notice the space you made before the bg-green class, thank you

Hitmands · Accepted Answer · 2020-06-07 14:32:11Z

2

That shouldn't really bother you too much, it's not a big deal...

Anyway, add the spacing as part of the condition to solve it:

<div className={`container${someCondition ? ' bg-green' : ''}`}

or

const classes = ['container'].concat(condition ? 'foo' : [];

return <div className={classes.join(' ')} />

answered Jun 7, 2020 at 14:32

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

Comments

Nick F · Accepted Answer · 2022-02-17 20:44:11Z

Is it acceptable?? or a bad practice??, is there a good solution for it?

It's totally acceptable, and not a bad practice: it doesn't make any practical difference to the HTML if there's some extra space in a class attribute.

One neat solution, which also simplifies, eg. using multiple conditional classes, is to use the classnames package. This is a small JavaScript utility function for this exact purpose (ie. conditionally setting classes). Using classnames your example would look something like:

import classNames from 'classnames';
...
<div className={classNames('container', { 'bg-green': someCondition })}>

...this way the container class will always be present, and the bg-green class will be present only when someCondition is true. This makes it easy to add more conditional classes if you need to (you can add more keys to that object), and you don't need to worry about whitespace.

Collectives™ on Stack Overflow

conditional className in React?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related