CODEWITHSUNDEEP
javascriptreactjsjsx
Jenny Mok
Jenny Mok

Reputation: 2804

multiple condition in ternary operator in jsx

<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.

Upvotes: 25

Views: 103242

Answers (11)

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

you could use a switch statement like below as an alternative to the ternary statement.

getBackgroundColor(status) {
    switch (status) {
        case 'approved':
            return 'blue';
        case 'pending':
            return 'red';
        default:
            return 'black';
    }
}

render() {
    // ...

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

Upvotes: 0

Syed Ali Abbas
Syed Ali Abbas

Reputation: 1

You can also do it by simple short-circuiting syntax.

 <div style={{backgroundColor: (status === 'approved' && 'blue') || (status === 'pending' && 'black') || 'red'}}>
</div>

This is comparatively better than ternary operator and if you don't want to use functions.

Upvote if this helped :)

Thanks

Upvotes: 0

romail ahmad
romail ahmad

Reputation: 21

Multiple condition in ternary operator in JSX and JS

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

Upvotes: 2

Phaelax z
Phaelax z

Reputation: 1999

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.

Upvotes: 0

MW UMESH
MW UMESH

Reputation: 56

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>

Upvotes: -1

The Reason
The Reason

Reputation: 7973

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.

Upvotes: 2

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

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.

Upvotes: 39

Dom
Dom

Reputation: 2325

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.

Upvotes: 4

M0nst3R
M0nst3R

Reputation: 5283

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>
    );
}

Upvotes: 38

Hemerson Carlin
Hemerson Carlin

Reputation: 7424

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.

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104369

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';
}

Upvotes: 1

Related Questions