¿Sabías que hay alrededor de 200 volcanes en Costa Rica?, de los cuales solo cinco están activos que son: el Poás, Irazú, Turrialba, Rincón de la Vieja y Arenal. El resto se encuentran inactivos o extintos.
Bueno te vamos a hablar del Volcán Arenal.
El Volcán Arenal es un estratovolcán inactivo y un ícono de Costa Rica, ubicado en la provincia de Alajuela, dentro del Parque Nacional Volcán Arenal. Es conocido por su forma cónica y está rodeado por selvas tropicales, aguas termales y una rica biodiversidad, que incluye una gran cantidad de especies de aves. Su última gran actividad eruptiva comenzó en 1968 y cesó en 2010.
Escribe este archivo "Volcan.jsx"
Crea una constante de animales con un respectivo SetAnimales, escribe los que piensas que hay en Costa Rica!
Vamonos a salvarlos porque parece que el Volcán Arenal presenta actividad!
Creamos constante para evacuarlos del lugar
const evacuar = (nombre) => {
setAnimales(animales.filter((a) => a !== nombre));
};
En Playas solo creábamos botones, pero en Volcán creamos una lista completa:
Un "li" puede contener texto + un botón + una función
// Aquí hacemos una lista a mano usando un for
let listaAnimales = [];
for (let i = 0; i < animales.length; i++) {
listaAnimales.push(
<li key={i}>
{animales[i]} está en peligro{" "}
<button onClick={() => evacuar(animales[i])}>Evacuar</button>
</li>
);
}
Imagina lo siguiente
1. Un helicóptero hace rondas para rescatar a los animales:
for (let i = 0; i < animales.length; i++)
i = 0 → Primera ronda: visita al animal 1
i = 1 → Segunda ronda: visita al animal 2
i = 2 → Segunda ronda: visita al animal 3
i = 3 → Segunda ronda: visita al animal 4
i = 4 → ¡STOP! Ya no hay más animales (porque animales.length = 4)
listaAnimales.push( ... )
Es como cuando el piloto anota en su lista qué animal encontró y qué botón debe apretar para salvarlo.
En Playas usábamos:
<div className="botones">{botones}</div>
Pero en Volcan.jsx vemos esto:
<ul>{listaAnimales}</ul>
Como se muestra
return (
<div className="volcan">
<h2>Volcán Arenal</h2>
{animales.length > 0 ? (
<ul>{listaAnimales}</ul>
) : (
<p>Todos los animales están a salvo!</p>
)}
</div>
);
NO OLVIDES IMPORTARLO EN EL APP.JSX
