¿Qué son las expresiones condicionales en línea en ReactJS?

En la reacción, el renderizado condicional es el proceso para mostrar componentes basados ​​en una condición particular. Por ejemplo, al crear la aplicación de la lista de tareas pendientes, los desarrolladores deben mostrar una tarea solo si hay una tarea pendiente disponible; de ​​lo contrario, pueden mostrar un mensaje como «No hay una tarea pendiente disponible».

En este tutorial, analizaremos el concepto de representación condicional en línea en React. Como sugiere la condición en línea, podemos escribir la condición en una sola línea. Hay varios métodos para la representación condicional en línea en React. 

Los usuarios primero deben configurar el entorno del proyecto de reacción en su computadora local.

Creando un nuevo proyecto de reacción

Paso 1: para crear una nueva aplicación de reacción , ejecute el siguiente comando en su terminal.

npx create-react-app testapp

Paso 2: ahora, muévase dentro del directorio del proyecto usando el siguiente comando.

cd testapp

Directorio del proyecto: Debería verse como la imagen de abajo.

Método 1: Operador condicional (ternario) if-else en línea Los
programadores pueden utilizar el operador ternario ( ? : ) como una breve instrucción if-else. El operador ternario es un operador javascript simple que toma 3 operandos. 

Sintaxis:

Mientras trabajan con el operador ternario, los desarrolladores deben envolver toda la expresión entre llaves. Para mejorar la legibilidad del código, los usuarios pueden envolver los operandos dentro del paréntesis. 

{
condition ? ("condition is true") : ("condition is false")
}

Cuando la condición es verdadera, devuelve «la condición es verdadera «; de lo contrario, devuelve «la condición es falsa «. Aquí, los desarrolladores pueden incluir componentes como un operando en lugar de un elemento HTML. 

Ejemplo:

Ahora, edite el archivo App.js y agréguele el siguiente código.

Nombre de archivo: App.js

En este archivo, declararemos un nombre de variable ‘ totalTask’ y le asignaremos un valor. A continuación, utilizaremos el operador ternario para mostrar los diferentes mensajes según el valor de la variable ‘ totalTask ‘. 

import React, { Component } from 'react';
 
// rendering different message according to the
// value of total task variable
class App extends Component {
  render() {
    const todoList = ['write article', 'read article', 'Review article'];
    const totalTask = todoList.length;
    return (
      <div>
         <h1 style={{color: "green"}}>GeeksForGeeks</h1>
         <b>{totalTask > 0 ?
         (<h2>The user has total {totalTask} task pending</h2>) :
         (<h2>The user has not any task pending</h2>) }</b>      
      </div>
    );
  }
}
  
export default App;

Comando a ejecutar: 

npm start

Producción: 

En la imagen de salida anterior, el usuario puede ver que muestra «el usuario tiene 3 tareas pendientes», ya que el usuario tiene un total de 3 tareas por hacer. 

Método 2: Inline If con operador lógico &&

Aquí, el operador lógico && es un operador booleano que funciona igual en React que en Javascript. Toma 2 condiciones como operandos. Si la primera condición es Verdadera, solo evalúa la segunda condición. Aquí, en lugar de agregar la condición como segundo operando, podemos agregar el componente de reacción. Entonces, si la primera condición se vuelve verdadera, solo genera el componente de reacción. 

Sintaxis:

Los desarrolladores deben incorporar la expresión con las llaves. Si lo necesitan, pueden envolver operandos dentro del paréntesis para mantener limpio el código. 

{
   (condition) && (React component or HTML code)
}

Cuando la condición se evalúa como verdadera, devuelve la parte correcta (componente de reacción o código HTML) como salida…

Ejemplo:

Nombre de archivo: App.js

En este archivo, escribiremos un código para representar el mensaje de acuerdo con el valor de la variable ‘ totalTask’ . 

import React, { Component } from 'react';
 
// using inline if with logical && operator
class App extends Component {
  render() {
    const todoList = [];
    const totalTask = todoList.length;
    return (
      <div>
        <h1 style={{color: "green"}}>GeeksForGeeks</h1>
         {
           (totalTask > 0) &&
           (<h2>The user has total {totalTask} task pending</h2>)
         }
         {
           (totalTask === 0) &&
           (<h2>The user has not any pending task.</h2>)
         }    
      </div>
    );
  }
}
  
export default App;
export default App;

Comando a ejecutar: 

npm start

Producción: 

En la imagen de arriba, el usuario puede ver que muestra el mensaje ‘El usuario no tiene ninguna tarea pendiente’ mientras evalúa (totalTask ​​=== 0) condición True.