18. Renderizado condicional en React
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 &&
.