Estoy usando reaccionar y tratando de ver cómo diseñar un texto en función de múltiples condiciones. Las condiciones se basan en el estado. Así que tengo una función de mapa que itera sobre una matriz de filas y todas tienen un campo de estado. Los cinco estados son:
'INTRO' 'COMIENZO' 'MEDIO' 'FIN' 'CONCLUSIÓN'
Así que quiero que el estado de introducción sea verde, el estado inicial sea azul, el estado medio sea rojo, el estado final sea púrpura y el estado de conclusión sea gris. Intenté hacer esto con operadores ternarios pero parece que solo se puede lograr con dos colores. Por ejemplo:
{rows.map(row => ( <TableRow key={row.id}> <TableCell style={{ color: row.status === 'COMPLETED' ? 'green':''}} classes={{ root: classes.tableCell }} align="center">{row.status}</TableCell> </TableRow> ))}Como puede ver, no es tan fácil de hacer con ternario. ¿Hay alguna otra manera de lograr esto?
Puede usar una caja de interruptor para tener múltiples acondicionamientos como se muestra a continuación
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>