Estoy usando el enlace useState en React y estoy tratando de devolver una cadena para mostrarla en un elemento h1 de una matriz cada vez que hago clic en un botón para llamar a una función.
Intenté usar un bucle for para devolver el índice de cada matriz, sin embargo, mi elemento h1 solo muestra el último índice de la matriz. Aquí está mi código:
import React, { useState } from "react"; export default function App() { const [state, setState] = useState("Start"); const greeting = ["Hello", "World!"]; function nextWord() { for (let i = 0; i < greeting.length; i++) { setState(greeting[i]); } } return ( <> <h1>{state}</h1> <button onClick={nextWord}>+</button> </> ); }Como puede ver, mi función nextWord solo muestra el último elemento de mi matriz en el elemento h1. ¿Cómo hago para que muestre el índice 0, el índice 1, etc... con cada clic del botón que llama a la función nextWord? (Por ejemplo, mostrará "Hola" en h1 el primer clic y luego "Mundo" en el siguiente clic).
Una forma sería almacenar el índice en lugar de la palabra real.
import React, { useState } from "react"; export default function App() { const [state, setState] = useState(0); const greeting = ["Start", "Hello", "World!"]; function nextWord() { setState((state + 1) % greeting.length) } return ( <> <h1>{greeting[state]}</h1> <button onClick={nextWord}>+</button> </> ); } Su(s) variable(s) de estado podrían tener un nombre más descriptivo, en este caso podría nombrarlas wordIndex y setWordIndex .
Si solo necesita que se muestre "Inicio" al principio (para que "Inicio" no vuelva a aparecer), puede cambiar la lógica ligeramente.
import React, { useState } from "react"; export default function App() { const [state, setState] = useState(-1); const greeting = ["Hello", "World!"]; function nextWord() { setState((state + 1) % greeting.length) } return ( <> <h1>{greeting[state] || "Start"}</h1> <button onClick={nextWord}>+</button> </> ); }