Adding classes with React

Question

I have a basic component that I'd like to use in multiple instances with differing classes.

 <div className="module module--{this.props.classModifier}" ></div>

When I render the above using <...classModifier="red" /> it doesn't affect what is rendered and the browser outputs {this.props.classModifier}

Can anybody point out where and what I'm doing wrong?

The main reason why this happens is because the `{this.props.classModifier}` is treated as string instead of a variable. You have options. You can use **concatenation** or **interpolation**. — Ionut Necula, Jan 29 '19 at 10:24

Hai Pham · Answer 1 · 2019-01-29T10:35:21.603

1

This syntax will be treated as a pure string: "module module--{this.props.classModifier}". If you want to append string using JSX, try this syntax instead className={"module module--" + this.props.classModifier}.

edited Jan 29 '19 at 10:35

answered Jan 29 '19 at 10:18

Hai Pham

2,188
11
20

Jitesh Manglani · Accepted Answer · 2019-01-29T10:34:48.700

1

Correct syntax would be:

You can use interpolation syntax from ES6.

<div className={`module module--${this.props.classModifier}`}></div>

edited Jan 29 '19 at 10:34

answered Jan 29 '19 at 10:19

Jitesh Manglani

495
5
12

1

Not typically in React projects (for this specific example), although it *does* work. (Adding "why" would be good, too.) – T.J. Crowder Jan 29 '19 at 10:19
To plagiarise @T.J.Crowder "Why" would be a very useful extension to your answer. – Liam Jan 29 '19 at 10:21

score 1 · Answer 3 · answered Jan 29 '19 at 10:22

As an explanation, if you use double quotes only, you're just rendering a string. It won't get the variable reference like that. You have to split the variable and the string portions by wrapping it with the curly braces:

//Template Literals
className={`module module--${this.props.classModifier}`}

//Concatenation
className={"module module--" + this.props.classModifier}

Behnam · Answer 4 · 2019-01-29T10:23:48.957

0

you need change code to this:

<div className={`module module--${this.props.classModifier}`}></div>

edited Jan 29 '19 at 10:23

answered Jan 29 '19 at 10:19

Behnam

6,244
1
39
36

@Ionut - Ah yes. (Huh, normally I do check for edits...) – T.J. Crowder Jan 29 '19 at 10:32

score 0 · Answer 5 · answered Jan 29 '19 at 10:20

0

You are using this.props.classModifier inside a "" so it will print as it is. Use template strings
Use this

 className={`module module--${this.props.classModifier}`}

answered Jan 29 '19 at 10:20

Maheer Ali

35,834
5
42
73

Adding classes with React

5 Answers5