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.

Answer 1

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.