multiple condition in ternary operator in jsx

Question

<div style={{'backgroundColor': status === 'approved' ? 'blue' : 'black'}}>
</div>

black is the default color but what if I want to add the 3rd condition?

status can be 'approved', 'rejected', 'pending' or more.

Really, you should only use a ternary if you have 2 possible results. You can "chain" ternaries to add more possible results, but it tends to get messy fast. Just use an `if`. — Carcigenicate, Sep 25 '17 at 15:36
Don't handle it all in the JSX. I'd write a function that returns the right color based on the status, and call the function from the JSX. — Andy, Sep 25 '17 at 15:38
Possible duplicate of [Multiple Ternary Operators](https://stackoverflow.com/questions/7757549/multiple-ternary-operators) — bennygenel, Sep 25 '17 at 15:39
Would be nice to have an inline "switch" like if/elseif/else option in React/JSX. — Ben in CA, Apr 10 '23 at 22:08

score 37 · Answer 1 · answered Sep 25 '17 at 15:42

37

I would suggest using functions if your conditions get complicated, to not degrade your code readability.

getBackgroundColor(status) {
    if (status === 'approved') {
        return 'blue';
    }
    if (status === 'pending') {
        return 'red';
    }
    return 'black';
}

render() {
    // ...

    return (
        <div style={{ 'backgroundColor': this.getBackgroundColor(status) }}></div>
    );
}

answered Sep 25 '17 at 15:42

M0nst3R

5,186
1
23
36

5

Chaining ternary statements like some other answers are suggesting is absolutely unreadable and a terrible practice. This solution is clear and should be the accepted answer. – Cobie Fisher Jan 19 '22 at 23:49
1

This is a very nice practice, thank you for sharing! – KYin May 15 '22 at 13:39

Paul Fitzgerald · Accepted Answer · 2018-07-24T10:16:39.707

35

You could do the following:

<div style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'pending' ? 'black' : 'red'}}>
</div>

This means if status === 'approved' set the background color as blue, if status === 'pending' set it as black, else set it as red.

edited Jul 24 '18 at 10:16

answered Sep 25 '17 at 15:36

Paul Fitzgerald

11,770
4
42
54

Dom · Answer 3 · 2017-09-25T15:48:12.523

4

To chain ternary operations you need to add another ternary operator to be returned when the conditions are not met, for example:

a === true ? a : b

In place of b you would add a new ternary operator, like so:

a === true ? a : b === true ? b : c

Bonus:

When you're just checking for null/undefined/false you can use the pipe operator, for example this:

var x = a !== null ? a : b;

Can be simplified to:

var x = a || b;

And pipe operators can be chained infinitely like ternary operators.

edited Sep 25 '17 at 15:48

answered Sep 25 '17 at 15:43

Dom

2,275
3
24
34

on second condition how that ternary operator works? – Shweta May 07 '19 at 05:32

score 2 · Answer 4 · answered Dec 12 '19 at 06:15

There is another way how to do it with the a bit more readable & cleaner code style. We can replace the ternary operator with the object literal and use this instead of nesting ternary operators, like so

function getBackgroundColor(status){
  const backgroundColorByStatus = {
    approved: 'blue',
    pending: 'black',
    default: 'red',
  }

  return backgroundColorByStatus[status] || backgroundColorByStatus['default']
}

// somewhere below
<div style={{'backgroundColor': getBackgroundColor(status)}}>fancy div</div>

With this approach you can have multiple colors and code will be still clean & readable :)

Hope it will help.

score 2 · Answer 5 · edited Jun 24 '21 at 04:56

2

Multiple condition in ternary operator in JSX and JS

style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'cancel' ? 'red' : 'green'}}

edited Jun 24 '21 at 04:56

blazej

927
4
11
21

answered Jun 23 '21 at 18:17

romail ahmad

21
1

score 1 · Answer 6 · answered Sep 25 '17 at 15:39

Using multiple ternary operators is not a good idea, better to use a function and put if-else conditions inside that and call that function from render. It helps you to make the render part clean and short.

Like this:

<div style={{'backgroundColor': this._style(status)}}></div>

_style(status){
    if(status == 'approved')
        return 'blue';
    else if(status == 'pending')
        return 'black';
    else return 'red';
}

score 1 · Answer 7 · answered Sep 25 '17 at 15:40

I'd handle it separately as other types of status may appear in the future.

const getBackgroundColor(status) {
  if (status === 'approved') {
    return 'blue'
  }
  else if (status === 'pending') {
    return 'black'
  } else {
    return 'red'
  }
}

<div style={{'backgroundColor': getBackgroundColor(status) }}>
</div>

Code gets easier to understand and reason about.

score 0 · Answer 8 · answered Jun 23 '21 at 19:35

I would not use ternary because it gets hard to read. Why not store the status and associated colors in an object then just reference that?

const colors = {approved:"blue", rejected:"red"};


<div style={{'backgroundColor':status in colors ? colors[status] : "black"}}>
</div>

Oops, I didn't realize how old this thread was.

score -1 · Answer 9 · edited Jun 21 '21 at 14:53

-1

Inside render you can create an empty array variable. As shown below, you can apply nested styling. Also, you won't need a nested ternary operator.

let styleValue = [];
if(status === 'approved') {
  styleValue.push({backgroundColor:'blue'})
} else {
  styleValue.push({backgroundColor:'black'})
}

<div style={styleValue}>
</div>

edited Jun 21 '21 at 14:53

Jop Knoppers

676
1
10
22

answered Jun 21 '21 at 09:09

MW UMESH

31
2

multiple condition in ternary operator in jsx

9 Answers9