Hola chicos, tengo problemas para entender cómo crear una instrucción IF else & en React. Toda la documentación, videos y preguntas que encuentro en línea solo muestran el método para hacer uno de ellos, ya sea un IF else o un &&
Básicamente, la declaración IF que estoy tratando de crear dentro de JSX se ve así.
If(data.AP == "1" && data.MP == "1") { set.Text("Both") } else if(data.AP == "0" && data.MP == "1") { set.Text("Manager") } else if(Data.AP == "1" && data.MP == "0") { set.Text("Payroll") } else{ setText("Not Approved) }Una declaración IF bastante simple en Java, pero parece que no puedo encontrar una manera de traducir esto a JSX. Hasta ahora, esto es lo más lejos que tengo y me sigue dando errores cada vez que lo corto y lo cambio según la documentación que estoy leyendo. yo se como usar?? Operadores ternarios y operadores &&, pero usarlos juntos no parece funcionar para mí.
return ( { data.MP == "1" && data.AP == "1" && ( <td colSpan="1">{"Both"}</td> ) : null } )Puede concatenar tantos como sea necesario:
data.AP == "1" && data.MP == "1" ? FIRST THEN HERE : data.AP == "0" && data.MP == "1" ? SECOND THEN HERE : data.AP == "1" && data.MP == "0" ? THIRD THEN HERE : ELSE THEN HEREReemplace el texto con la expresión deseada
Así es como te sugiero que lo hagas:
let text; if (data.AP == "1" && data.MP == "1") { text = "Both"; } else if (data.AP == "0" && data.MP == "1") { text = "Manager"; } else if (data.AP == "1" && data.MP == "0") { text = "Payroll"; } else { text = "Not Approved"; } // ...then when you want to display it: {text}...porque es fácil de leer y depurar.
Pero si realmente desea incrustarlo en {...} , puede usar una serie anidada de operadores condicionales:
{ data.AP == "1" && data.MP == "1" ? "Both" : data.AP == "0" && data.MP == "1" ? "Manager" : data.AP == "1" && data.MP == "0" ? "Payroll" : "Not Approved" }Aunque puede hacerlo bastante legible (aunque no muy depurable):
{ data.AP == "1" && data.MP == "1" ? "Both" : data.AP == "0" && data.MP == "1" ? "Manager" : data.AP == "1" && data.MP == "0" ? "Payroll" : "Not Approved" }Sin embargo, si usa un formateador de código automático, es posible que lo vuelva a formatear.