Necesito crear una función que imprima en el DOM con cada clic, los elementos almacenados en un array. Es decir con el primer clic añado el string de la posición 0 del array, el segundo clic, añade el string de la posición 2 y así sucesivamente. Los strings tienen que añadirse como elementos hijo de un elemento Estoy usando NextJs, y entiendo que tengo que usar useState() para actualizar el estado con este caso, pero no sé como aplicarlo.
-
1Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.– Comunidad BotCommented el 23 ago. 2022 a las 0:35
-
Por favor agrega el código de lo que has intentado hasta el momento. Y agregalo como texto y no como una imágen. Te recomiendo que hagas el recorrido de bienvenida y leas Cómo preguntar y ejemplo mínimo verificable– Andres GardiolCommented el 24 ago. 2022 a las 14:49
Añade un comentario
|
1 respuesta
puedes tener un useState que maneje la posición y otro que maneje el array nuevo con la información que vas agregando y este array es el que muestras, algo asi:
const [indexArray, setIndexArray] = useState(0)
const dialogos = [ "dialogo1", "dialogo2", "dialogo3" ]
const [dialogosState, setDialogosState] = useState([])
y al elemento que le des onClick le agregar la siguiente función
const handleDialog = () => {
if (indexArray >= dialogos.length) return // esto ultimo es para que no agregue mas elementos
setDialogosState(...dialogosState, dialogos[indexArray])
setIndexArray(indexArray + 1)
}
ahora simplemente renderizas el dialogosState con un map, asi:
return (
<div>
<h1 onClick={handleDialog}>presiona aqui y veras el resultado</h1>
{dialogosState.map((dialog, i)=>(<h3 key={i}>{dialog}</h3>)) }
</div>
)