Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Utilizando renderizado condicional vamos a poder, cómodamente desde nuestro código JSX imprimir o no un componente, en función de una condición.
Sin ternario. Si el estado o la propiedad existe, lo muestro, si no no hago nada
return (
<div>
{isVisible && <div>Hola</div>}
</div>
);Este renderizado condicional puede ser útil para hacer un popup, por ejemplo. Si la variable isVisible es false, el contenido renderizado desaparecerá del DOM.
En el caso de que este contenido tuviese un video, este se detendría automáticamente, lo cual probablemente sea un comportamiento deseado.
Ejercicio renderizado condicional
Al pulsar un botón incrementaremos una unidad un estado que contendrá un valor numérico. Si el estado es un número par, mostraremos en pantalla un párrafo con texto. En caso contrario, no mostraremos nada.
Con ternario. Si el estado o la propiedad existe, lo muestro, si no, hago otra cosa
return (
<div>
{isActive
? <div>Esta activo!</div>
: <div>No esta activo :(</div>
}
</div>
);Ejercicio renderizado condicional
Al pulsar un botón incrementaremos una unidad un estado que contendrá un valor numérico. Si el estado es un número par, mostraremos en pantalla un párrafo con el texto hola, si el estado es un número impar, mostraremos un párrafo con el texto adios. Para ello utilizaremos el renderizado condicional con un operador ternario.