¡Genial! Lograste salvar las tortugas. Ahora para a limpiar playas de Costa Rica aprenderemos a usar constantes pero con arrays, for loops y variables let.
Escribe este archivo "Playas.jsx"
En primer lugar lo que vamos a hacer es crear una array que ahí puedes guardar una cantidad x de elementos, mira este ejemplo!
Así se ven normalmente las array en react.
const [Dinero, setDinero] = useState([
"Colones",
"Dolares",
"Euros",
"Pesos"
]);
Crea una constante llamada desechos y setDesechos para esta actividad. Dentro de esa const pon elementos que son basura en las playas.
Tenemos que crear una funcion para poder limpiar la playa de los desechos de la array.
const depositar = (d) => setDinero(dinero.filter((x) => x !== d));
Este codigo deposita dinero en un banco, puedes usarlo para limpiar la playa!!!
¿Qué hace esta función?
const depositar = (d) => setDinero(dinero.filter((x) => x !== d));?
Cuando le das click elimina lo que tienes en la array
El filter, revisa uno por uno, borra el qeu coincida y guarda la lista sin dinero
Ejemplo, quito los colones y que quedo con los dolares
Luego debemos crear una variable llamada "let" a diferencia de la const, let si se puede modificar
Le ponemos por nombre "botones = [];"
let botones = [];
for (let i = 0; i < desechos.length; i++) {
botones.push(
<button key={i} onClick={() => limpiar(desechos[i])}>
Recolectar {desechos[i]}
</button>
);
}
Con esto nos ahorramos el escribir 4 botones a mano.
El ciclo hace esto:
1. Empieza en el primer desecho.
2. Crea un botón para ese desecho.
3. Pasa al siguiente.
4. Repite hasta terminar.
El boton tiene el Onclick que sirve para limpiar
Si la lista cambia, React vuelve a dibujar solo los botones que faltan.
Lo que se muestra en pantalla!!!
return (
<div className="playas-container">
<h2>Limpieza de las Playas</h2>
<p className="instruccion">
Haz clic en los desechos para recolectarlos y ayudar a proteger a las
especies marinas
</p>
<div className="botones">{botones}</div>
//Aqui muestra el mensaje final
{desechos.length === 0 && (
<p className="mensaje-final">Playa limpia!</p>
)}
</div>
);
NO OLVIDES IMPORTARLO EN EL APP.JSX
