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:
'INTRO' 'BEGINNING' 'MIDDLE' 'END' 'CONCLUSION'
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:
{rows.map(row => (
<TableRow key={row.id}>
<TableCell style={{ color: row.status === 'COMPLETED' ? 'green':''}} classes={{ root: classes.tableCell }} align="center">{row.status}</TableCell>
</TableRow>
))}
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'
default:
return ''
}
}
<TableCell style={{ color: cellColor(row.status)}} classes={{ root: classes.tableCell }} align="center">{row.status}</TableCell>