Usar operadores ternarios en React

1. Usar operadores ternarios en React
2. Usar operadores ternarios en JSX

React es un marco utilizado para crear interfaces de usuario con más funciones que los sitios web HTML básicos, pero aún es posible cambiar la apariencia de los elementos usando estilos CSS.

Los operadores ternarios, en particular, se pueden utilizar para generar valores dinámicos.

Usar operadores ternarios en React

Las aplicaciones de React se escriben comúnmente en un lenguaje de plantillas llamado JSX. Es similar a HTML en muchos aspectos, pero ofrece más funciones.

Dentro de JSX, hay múltiples formas para que los desarrolladores de React establezcan condiciones. Puede utilizar las declaraciones if/else o switch, pero una tercera forma es un operador ternario.

El operador ternario es una forma bastante sencilla de establecer una condición y devolver valores específicos en función de si es verdadero o falso. Esto puede configurar clases dinámicas, aplicar estilos dinámicos en línea o representar valores de cadena de forma condicional.

Incluso puede agregar funciones personalizadas a su aplicación utilizando un operador ternario.

Usar operadores ternarios en React fuera de la instrucción return

Dado que React es un marco basado en JavaScript, puede usar JavaScript normal fuera de la declaración de retorno. Cualquier condición, como if/else o switch, se puede configurar aquí.

En este ejemplo, utilizaremos un operador ternario para generar valores dinámicos para el atributo className. Tenemos una cadena y agregamos el resultado de un operador ternario, que es otra cadena.

Ejemplo:

export default function App() {
    const [night, setNight] = useState(true);
    const classNames = "base " + night ? "nightmode" : "";
    return (
        <div className={classNames}>
            <h1>Hello, World</h1>
        </div>
    );
}

En este ejemplo, usamos un operador ternario para generar condicionalmente un nombre de clase para el contenedor <div>. Puede verificar la apariencia del componente App en esta demostración en vivo.

El valor final de la variable classNames dependerá del valor de la variable de estado night. Por defecto, establecemos el valor de la variable noche en true.

A menos que cambiemos ese valor usando la función setNight(), el operador ternario devolverá el valor de cadena 'nightmode'.

Usar operadores ternarios en JSX

JSX es el lenguaje de plantillas predeterminado para crear aplicaciones React. Puede usar llaves dentro de JSX y escribir expresiones de JavaScript válidas entre ellas, incluido un operador ternario.

Puede usar el operador ternario para configurar clases dinámicas en React. Es una sintaxis corta y simple.

Primero, debe escribir una expresión de JavaScript que evalúe “true” o “false”, seguida de un signo de interrogación.

Después, tendrás dos valores separados por dos puntos. El primero se devolverá si la condición es verdadera, y el segundo se devolverá si es falsa.

Ejemplo:

export default function App() {
    const [night, setNight] = useState(true);
    return (
        <div className={"base " + night ? "nightmode" : ""}>
            <h1>Hello, World</h1>
        </div>
    );
}

De esta manera, puede generar valores dinámicos en línea. También puede usar un operador ternario para representar textos dinámicamente. Por ejemplo, para generar un texto de error cuando hay un error.

Ejemplo:

export default function App() {
    const [night, setNight] = useState(true);
    const [error, setError] = useState(false);
    const classNames = "base" + night ? "nightmode" : "";
    const handleInputChange = (data) => {
        if (data.indexOf("@") == true) {
            return null;
        } else {
            setError(true);
        }
    };
    return (
        <div>
            <div className={classNames}>
                <h1>Hello, World</h1>
            </div>
            Enter your email address:
            <input onChange={(e) => handleInputChange(e.target.value)}></input>
            <p style={{ color: error ? "red" : "black" }}>
                {error ? "please enter a valid email address" : "Everything is fine"}
            </p>
        </div>
    );
}

Aquí, solicitamos a los usuarios que ingresen sus direcciones de correo electrónico y realicen una validación muy simple para asegurarse de que lo que ingresen sea consistente con los patrones generales de las direcciones de correo electrónico.

Primero, creamos un elemento <input> y escuchamos el evento onChange para llamar al controlador de eventos handleInputChange(). Todo lo que escribamos en el elemento de entrada de texto se pasará al controlador de eventos como argumento.

En el controlador de eventos, usamos una declaración simple if/else para verificar el valor proporcionado por los usuarios. Si contiene el símbolo ‘@’, el valor pasa la prueba y podemos suponer que es una dirección de correo electrónico válida.

Si no, daremos la alarma mediante la función setError.

Utilizamos la variable de estado error, un booleano que indica si los usuarios deben alarmarse o no. También definimos una función setError, utilizada para actualizar el valor de esta variable de estado.

Finalmente, usamos un operador ternario para verificar si deberíamos o no mostrar un texto advirtiendo a los usuarios sobre ingresar una dirección de correo electrónico válida. Si la variable de estado error es verdadera, nuestro operador ternario devolverá un mensaje de advertencia; si no, devolverá la cadena 'Todo está bien'.

También aplicamos estilos condicionalmente para hacer que el texto sea rojo si contiene un mensaje de advertencia para obtener beneficios adicionales para la experiencia de usuario. De lo contrario, permanecerá en el color negro predeterminado.