En este artículo del Manual de React vamos a explicar una de las necesidades habituales a la hora de escribir los templates de los componentes React, con JSX. Se trata de realizar expresiones condicionales, con las que podemos conseguir que varíe condicionalmente el aspecto de un componente, en función de una de sus propiedades o estado.

Para crear un condicional en un template de React podemos usar una expresión con el mismo código Javascript que usaríamos en la programación tradicional, aplicando el operador ternario.

Como sabemos ya, las expresiones en JSX se escriben entre llaves. Ahí podemos colocar código Javascript y aquel valor que resulte de la evaluación de la expresión es lo que aparecerá como contenido en el template.

La expresión condicional nos quedará de manera similar a esta:

{ this.state.showTitle ? <h1>Título</h1> : '' }

Para el procesamiento del condicional se evalúa un atributo del estado "showTitle". En caso positivo se muestra un heading H1 con un texto. En caso contrario, simplemente mostramos la cadena vacía, o sea, nada.

En este caso hemos usado poco código JSX para cada parte del condicional, pero podríamos tener unas cuantas etiquetas o componentes que mostrar para cada caso. No es un problema, puesto que podemos seguir usando la misma expresión con el operador ternario. Sólo entonces convendría organizar el código de una manera que resultase fácil para la lectura. Por ejemplo tal como se puede ver a continuación.

{ this.state.showTitle 
  ? <div>
      <h1>Título</h1>
      <span> Más contenido...</span>
    </div>
  : <div className="sin-titulo">
      <b>Desconocido...</b>
      <FeedbackMessage message="No hemos recibido título" />
    </div>
}

Obviamente, como en nuestro ejemplo de código anterior estamos usando el estado para crear la expresión condicional, tendremos que haberlo inicializado, generalmente en el constructor.

constructor(props) {
  super(props);
  this.state = {
    showTitle: true
  }
}

Ejemplo de componente con un condicional

En este artículo no vamos a agregar mucho más conocimiento adicional sobre React, pero sí queremos aprovechar la ocasión para practicar un poco. La idea a continuación es realizar un componente completo que incorpore un condicional.

Vamos a practicar con los componentes funcionales sin estado, que ya vimos por primera vez en el artículo sobre El estado en React. Nuestro ejemplo en este caso es un sencillo "badge" (placa, mensaje pequeñito) que nos dice si algo está completado o no.

Para ello recibirá una propiedad boleana, donde indiquemos desde fuera si tiene que mostrarse como completado o incompleto. Nuestro componente lo podremos usar de dos maneras:

En el primer caso mostrará un badge con el texto "completado":

<CompletedBadge completed />

Si no le pasamos la propiedad completed al componente, entonces se entiende que debe mostrar el badge con el texto "incompleto".

<CompletedBadge />

El componente en sí tendrá este código:

import React from 'react';
import './CompletedBadge.css';

const CompletedBadge = (props) => {
  return props.completed
    ? <span className="Badge Badge-completed">Completado</span>
    : <span className="Badge Badge-incompleted">Incompleto</span>
}
export default CompletedBadge;

El código es bastante claro y, salvo el condicional que se acaba de explicar, no tenemos prácticamente nada nuevo que no se haya explicado antes en el Manual de React. Solo hay un detallito que quizás ha llamado tu atención.

Importar CSS

Queremos detenernos en el hecho de importar CSS, algo que podremos hacer o no dependiendo de la configuración de nuestro proyecto. El caso es que los componentes pueden importar su propio CSS. No hay problema en ello, siempre que tengamos un entorno de desarrollo que sepa lidiar con este tipo de imports. Si hemos iniciado nuestro proyecto con "create react app", tendremos la habilidad de importar CSS. En caso contrario deberíamos saber configurar Webpack para resolver este tipo de imports.

El importado de CSS lo realizamos en el componente en la línea:

import './CompletedBadge.css';

El código CSS que estamos importando en el archivo CompletedBadge.css es el siguiente:

.Badge {
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 11px;
  padding: 4px;
}

.Badge-completed {
  color: green;
}

.Badge-incompleted {
  color: red;
}

Bindear un valor boleano a un componente o elemento HTML

Ese ejercicio nos lleva a otra necesidad común, que consiste en bindear un valor boleano a un elemento.

Por ejemplo, en el caso de nuestro componente con el template condicional, CompletedBadge, el valor de la property que tenemos que pasar ("completed"), es un valor boleano. En HTML en general, los valores boleanos funcionan de tal modo que, si es verdadero se indica el valor y si es falso no se indica nada.

Para bindear un valor boleano al componente, simplemente tenemos que indicar una expresión que se evalúe a boleano.

<CompletedBadge completed={this.state.isCompleted} />

Si la expresión es positiva, entonces estaremos pasado un true. Si la expresión es negativa, React es lo suficientemente inteligente para no pasar ningún valor y producir que dentro del componente el valor de la property se evalúe como negativo.

Conclusión

Hemos resuelto una necesidad común en los templates de React, escritos en JSX, que permite componer ciertas partes de manera condicional, para colocar unos contenidos u otros dependiendo del valor de properties o estado.

Además hemos aprendido a cómo enviar datos con valores boleanos, desde los hijos a los padres, para setear propiedades que vamos a usar para las expresiones condicionales.