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.
Con estados. 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.
Con estados II. Si el estado o la propiedad existe, lo muestro, si no, hago otra cosa
return (
<div>
{truco.reps
? <div>{truco.reps}</div>
: <div>No reps specified</div>
}
</div>
);Ejercicios renderizado condicional
- Haremos una aplicación para calcular el coste de un viaje. Para ello desarrollaremos un componente que recibirá como prop el número de días y un número que determinará si el componente va a calcular el coste del hotel o el coste del viaje:
<ComponenteMultiple opcion="1" dias={dias}/>
<ComponenteMultiple opcion="2" dias={dias}/>- Opción 1 ( Coste Hotel): múltiplica el número de días por los 40 euros que cuesta cada días.
- Opción 2 ( Coste Alquiler):
- Cada día de alquiler cuesta 40 €.
- Si alquilas un coche por 3 días o más, obtienes un descuento de 20€ sobre el total.
- Si alquilas un coche por 7 días o más, obtienes un descuento de 50€ sobre el total (no acumulable con los 20€ de haber alquilado por más de 3 días).
Para hacer este ejercicio, ComponenteMultiple tendrá definidas en su interior dos funciones: calculaCosteHotel y calculaAlquilerCoche
2. Vamos a juntar los siguientes tres proyectos en uno solo:
- Convertir euros en dólares ( dólares = euros * 2)
- Calcular grados Fahrenheit (grados fahrenheit = 9/5 + 32 de los centígrados)
- Calcular la superficie de un rectángulo (largo * ancho)
Pintaremos tres veces un único componente en pantalla que mostrará en función de una prop el resultado correcto.
<ComponenteMultiple opcion={1} datos1={datosState1} />
<ComponenteMultiple opcion={2} datos1={datosState1} />
<ComponenteMultiple opcion={3} datos1={datosState1} datos2={datosState2} />Para hacer este ejercicio, ComponenteMultiple tendrá definidas en su interior tres funciones: calculaDolares, calculaGrados y calculaSuperficie.
