Skip to content

Styling a text in react based on multiple conditions

I am using react and trying to see how to style some text based on multiple condtions. The conditions are based on status. So I have a map function that is iterating over an array of rows and they all have a status field. The five status’ are:


So i want intro status to be green, beginning status to be blue, middle status to be red, end status to be purple, and conclusion status to be grey. I tried to do this with ternary operators but it seems it can only be achieved with two colors. For example:

{ => (
  <TableRow key={}>
    <TableCell style={{ color: row.status === 'COMPLETED' ? 'green':''}} classes={{ root: classes.tableCell }} align="center">{row.status}</TableCell>

As you can see, its not that easy to do with ternary. Is there any other way to achieve this?


You can use a switch case to have multiple conditioning like below

function cellColor(status) {
  switch(status) {
    case 'COMPLETED': 
      return 'green';
    case 'BEGINNING': 
      return 'blue'
    case 'MIDDLE': 
      return 'red'
    case 'END': 
      return 'purple'
    case 'CONCLUSION': 
      return 'grey'    
      return ''

<TableCell style={{ color: cellColor(row.status)}} classes={{ root: classes.tableCell }} align="center">{row.status}</TableCell>