Actividad 3 - Finca del café

¿Sabes que tan importante es el café en Costa Rica?

El café de Costa Rica es reconocido mundialmente por su alta calidad, gracias a la combinación de suelos volcánicos fértiles, un clima ideal y el cultivo exclusivo de granos de Arábica. El país prohíbe el cultivo de la variedad Robusta para garantizar un producto suave y equilibrado. El café ha sido históricamente vital para la economía y la cultura del país, y se cultiva en diversas regiones, incluyendo Tarrazú, que es una de las más famosas.

Así que vamos a aprender sobre el proceso del café y porque no aprender más de React con Sharky

Escribe este archivo "FincaCafe.jsx"

Para hacer café primero debemos saber que esto lleva un proceso importante que contiene algunas etapas, que veremos a continuación.

const etapas = [
  "Sembrar café",
  "Cosechar granos",
  "Secar al sol",
  "Tostar",
  "Disfrutar"
];

const [indice, setIndice] = useState(0);

Aqui creamos una constante que se llama "ETAPAS", pero tambien tenemos otra constante que se llama "INDICE"

Ya con esto podemos crear una const llamada "siguiente" para que vayamos pasando entre etapas.

const siguiente = () => {
    if (indice < etapas.length - 1) {
      setIndice(indice + 1);
    }
  };

Como se muestra:

return (
    <div className="finca-container">
      <h2>Finca del Abuelo</h2>
      <p className="etapa">{etapas[indice]}</p>

      //Estoy en un nivel MENOR que el ultimo nivel?
      {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>
  );

NO OLVIDES IMPORTARLO EN EL APP.JSX