React JSX in className if-else syntax

Question

I am currently working on a react app where I am adding and changing classes based on certain state changes. It worked successfully in testing with a ternary operator but now I realized I will have to add mutiple else-if statements so I am trying to convert it to a classic if else format but am getting syntax errors and I'm not sure how to do it.

Here is the ternary operator that worked fine:-

<div className={"wrapper " + (this.state.hot ? 'wrapper-gradient-hot' : 'wrapper-gradient-cold')}>

Here is my attempt to make it a classic if-else in JSX and failed:-

<div className={"wrapper " + (
                        if (this.state.hot) {
                            return 'wrapper-gradient-hot';
                        } else {
                            return 'wrapper-gradient-cold';
                        }
                    )}>

Pls help me out :)

score 5 · Accepted Answer · answered Mar 18 '18 at 23:48

5

You can only use expressions inside of a React Component attribute. You'll need to move your logic into a function.

function temperatureClassname(temp){
  const prefix = 'wrapper-gradient-'

  switch (temp) {
    case 'hot':      return prefix + 'hot'
    case 'cold':     return prefix + 'cold'
    case 'ice-cold': return prefix + 'too-cool'
  }
}

And your react component would look like this:

<div className={ temperatureClassname(this.state.hot) }>

answered Mar 18 '18 at 23:48

THEtheChad

2,372
1
16
20

Thanks, your suggestion was just what I needed haha. I almost never use a switch statement but here it’s just perfect. Thanks :) – user9069254 Mar 19 '18 at 02:38
Glad I could help. Cheers =) – THEtheChad Mar 20 '18 at 23:37

score 4 · Answer 2 · answered Mar 18 '18 at 23:41

If and else statements, are just that... statements. Inline JSX expressions that you wrap with {…} only allow expressions; statements are not expressions.

Your ternary approach is fine, though since there's some commonality between the two strings you can actually use interpolation:

<div className={`wrapper-gradient-${this.state.hot ? 'hot' : 'cold'}`}>

score 1 · Answer 3 · answered Mar 18 '18 at 23:40

1

One approach you could adopt is to handle this outside of your JSX. So, in your render function still but just above where you return.

render() {
  let gradientValue;
  // Put your if-else here and update gradientValue on each condition.
  return (
    <h1 className=`wrapper ${gradientValue}`>Your html here</h1>
  );
}

answered Mar 18 '18 at 23:40

Luke Glazebrook

580
2
14

``` className={`btn btn-secondary ${currency === 'INR' && 'active'}`}``` – Sanjay Sikdar Feb 24 '22 at 10:46

score 0 · Answer 4 · answered Mar 18 '18 at 23:41

0

return only returns values from inside a function, just putting parentheses around an if/else statement like that isn't going to work. You'd be better off sticking with the ternary operator, and nesting them as required.

answered Mar 18 '18 at 23:41

kshetline

12,547
4
37
73

React JSX in className if-else syntax

4 Answers4