Jenny Mok Jenny Mok - 1 month ago 13
React JSX Question

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.

Answer Source

You could do the following:

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