18. Renderizado condicional en React

21/04/20191 Min lectura — En React, Client, 😀

Es el primer día del reto que no cumplo con el requisito de la hora de programación, en algún momento también hay que tomarse un descanso completo.

De todas maneras me ha pasado algo bueno, por eso la "emojicategoría" tiene una "sonrisota" de las buenas.

He tenido que trabajar con React en proyectos que funcionaban con Gutenberg (el editor visual de WordPress) y Gatsby (el sistema de publicación de este blog).

Y lo que ocurre es que te sumerges en el uso de un sistema que no conoces y tienes que "dar por sabido" algunas cosas. Una de ellas es la sintaxis, por enrevesada que sea.

¿A quién lo le ha pasado lo no enterarse del código que está leyendo?

Pues en React, concretamente en el render de las plantillas, hay muchos atajos y formas de construir la plantilla JSX que sirven como atajos.

Uno de ellos es el "Conditional Rendering", que detallan en su documentación.

De esta forma este código del QuoteList.js:

render() {
let button = ''
if(this.state.pageNext != null) {
button = (
<button className="button" onClick={this.loadMore}>
Ver más
</button>
);
}
return (
<div>
{this.renderList()}
{button}
</div>
);
}

Podría construirse de esta otra forma:

render() {
return (
<div>
{this.renderList()}
{this.state.pageNext != null &&
<button className="button" onClick={this.loadMore}>
Ver más
</button>
}
</div>
);
}

Es un "poco" más difícil de leer para el ojo inexperto, pero nos ahorramos un montón de líneas y comprenderemos el uso del if con el operador lógico &&.