React curly braces inside quotes to ads className

Question

I'm trying to add a class name if a button is clicked

className={"collapse"+{active? "expand":null}}

If a button is clicked i want to add a class name expand along with collapse . But I'm getting syntax error.

Answer 1

This should work:

className={ collpase ${active? "expand": undefined} collpase ${active? "expand": undefined} }

Answer 2

While this won't work:

className={"collapse" + {active ? "expand" : null}}

This will:

className={"collapse" + active ?  "expand" : null}

The curly braces you used are syntax for creating an object, which isn't what you're trying to do here.

Answer 3

use backticks

 className={ `${active?"eexpand":null }`}

Answer 4

As answers above suggest, this will work:

className={"collapse" + active ?  "expand" : null}

But I would actually suggest using Template literals because it's more clean and performant.

This would look as such:

className={`collapse ${active ?  "expand" : ""}`}

Answer 5

You can use template strings such as:

className={`collapse ${active ?  "expand" : ""}`}

But I recommend clsx library:

className={ clsx( 'collapse', active && 'expand' ) };