Do you know how important coffee is in Costa Rica?
Costa Rican coffee is recognized worldwide for its high quality, thanks to the combination of fertile volcanic soils, an ideal climate, and the exclusive cultivation of Arabica beans. The country prohibits the cultivation of the Robusta variety to guarantee a smooth and balanced product. Coffee has historically been vital to the economy and culture of the country, and it is grown in various regions, including Tarrazú, which is one of the most famous.
So let’s learn about the coffee process and why not learn more about React with Sharky!
Write this file "FincaCafe.jsx":
Important to use:
1. import { useState } from "react";
2. export default function FincaCafe() { }
To make coffee, we first need to know that this involves an important process that contains several stages, which we will see next.
We will learn some different things
1. We will use a number to know which stage of a story we are in.
2. We change what we see based on that number.
3. We are not counting, we are navigating steps.
const etapas = [
"Sembrar café",
"Cosechar granos",
"Secar al sol",
"Tostar",
"Disfrutar"
];
const [indice, setIndice] = useState(0);
Here we create a constant called "ETAPAS", but we also have another constant called "INDICE".
This means that:
The number 0 means stage 1.
The number 1 means stage 2.
The number 2 means stage 3.
Now with this we can create a const called "siguiente" so that we can move between stages.
const siguiente = () => {
if (indice < etapas.length - 1) {
setIndice(indice + 1);
}
};
return (
Finca del Abuelo
{etapas[indice]}
{indice < etapas.length - 1 ? (
<button className="btn-siguiente" onClick={siguiente}>
Siguiente etapa
</button>
) : (
//LLEGASTE A LA ULTIMA ETAPA
<h3 className="mensaje-final">
Has completado todo el proceso del café!
</h3>
)}
</div>
);
<div class="notices tip" >
<p header-value="Tip"><h3 id="imagine-you-are-playing-a-game-with-5-levels">Imagine you are playing a game with 5 levels</h3>
<p style="font-size:1.6rem; color:#444; line-height:1.8;">etapas.length = How many levels the game has (example: 5 levels).</p>
<p style="font-size:1.6rem; color:#444; line-height:1.8;">indice = What level you are on right now (can be level 1, 2, 3...).</p>
<p style="font-size:1.6rem; color:#444; line-height:1.8;">The number 2 means stage 3.</p>
</p>
</div>
**DON'T FORGET TO IMPORT IT IN APP.JSX**
``` jsx
import FincaCafe from "./Components/FincaCafe.jsx"
