0

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.

introducir la descripción de la imagen aquí

2
  • 1
    Por 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 Bot
    Commented 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 Commented el 24 ago. 2022 a las 14:49

1 respuesta 1

0

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>
)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.