Tengo un código como el siguiente,
const variableType = 'INTEGER'; const editedValue = 100; const defaultValue = 4; return ( isOpen ? ( <span>something</span> ) : ( <> {(variableType ?? '').toUpperCase() === 'BOOLEAN' ? capitalize(editedValue ?? '') : {editedValue} </> );Ahora quiero agregar cuando este tipo de variable no es booleano y editedValue no es lo mismo que defaultValue. Quiero mostrar un icono junto con editedValue.
si el tipo de variable no es booleano y el valor editado es el mismo que el valor predeterminado, solo quiero mostrar el valor editado.
He intentado algo así,
return ( isOpen ? ( <span>something</span> ) : ( <> {(variableType ?? '').toUpperCase() === 'BOOLEAN' ? capitalize(editedValue ?? '') : {editedValue !== defaultValue && ( <Icon /> } {editedValue} </> );Pero lo anterior no parece correcto sintácticamente.
¿Cómo puedo cambiar el operador ternario anterior para satisfacer la condición anterior y mostrar el ícono? Podría alguien ayudarme con esto. soy nuevo en el uso del operador ternario. Gracias.
La clave aquí es comprender qué partes están en los elementos JSX y qué partes no lo están. Cuando estás en un elemento o fragmento, estás en un elemento JSX y usas {...} para insertar valores o código. Cuando estás dentro de {...} , no estás en una expresión JSX.
Creo que probablemente quieras:
return ( isOpen ? ( <span>something</span> ) : ( (variableType ?? '').toUpperCase() === 'BOOLEAN' ? capitalize(editedValue ?? '') : <> {editedValue !== defaultValue && <Icon />} {editedValue} </> );... pero le sugiero que lo divida para que sea más fácil de leer y mantener. Por ejemplo:
if (isOpen) { return <span>something</span>; } if ((variableType ?? '').toUpperCase() === 'BOOLEAN') { return capitalize(editedValue ?? ''); } return <> {editedValue !== defaultValue && <Icon />} {editedValue} </>; if (isOpen) return <span>something</span> return ( <> {(variableType ?? '').toUpperCase() === 'BOOLEAN' ? capitalize(editedValue ?? '') : <> {editedValue !== defaultValue && <Icon />} {editedValue} </> } </> )