javascriptreactjsjsx

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.

Solution

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