Did you know there are about 200 volcanoes in Costa Rica? Of those, only five are active: Poás, Irazú, Turrialba, Rincón de la Vieja, and Arenal. The rest are inactive or extinct.
Well, we are going to tell you about the Arenal Volcano.
The Arenal Volcano is an inactive stratovolcano and an icon of Costa Rica, located in the province of Alajuela, within the Arenal Volcano National Park. It is known for its conical shape and is surrounded by tropical forests, hot springs, and rich biodiversity, which includes a large number of bird species. Its last major eruptive activity began in 1968 and ceased in 2010.Write this file "Volcan.jsx":
Important to use:
1. import { useState } from "react";
2. export default function Volcan() { }
Create a constant of animals with a corresponding SetAnimales, write the ones you think live in Costa Rica!
const [animales, setAnimales] = useState([
"",
"",
"",
"",
""
]);
Let’s go save them because it looks like the Arenal Volcano is showing activity!
**We create a constant to evacuate them from the area**
```jsx
const evacuar = (nombre) => {
setAnimales(animales.filter((a) => a !== nombre));
};
```In Beaches we only created buttons, but in Volcano we create a complete list:
An "li" can contain text + a button + a function.
/*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>
);
}
Imagine the following
1. A helicopter makes rounds to rescue the animals:
for (let i = 0; i < animales.length; i++)
i = 0 → First round: visits animal 1.
i = 1 → Second round: visits animal 2.
i = 2 → Third round: visits animal 3.
i = 3 → Fourth round: visits animal 4.
i = 4 → STOP! There are no more animals (because animales.length = 4).
listaAnimales.push( ... )
It is like when the pilot writes down on their list which animal was found and which button to press to save it.
In Beaches we used:
<div className="botones">{botones}</div>
But in Volcan.jsx we see this:
<ul>{listaAnimales}</ul>
How it is displayed:
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>
);
DON’T FORGET TO IMPORT IT IN APP.JSX
import Volcan from "./Components/Volcan.jsx"
