score:30

Accepted answer

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.

score:-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>

score:0

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

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

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:1

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:1

multiple condition in ternary operator in jsx and js

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

score:3

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.

score:24

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

Related Query

More Query from same tag