0
144
VistasShuffle Array click handler event help Reaccionar
Así que tengo el siguiente código que baraja una matriz y devuelve un par de palabras
const words = [ 'monitor', 'program', 'application', 'keyboard' , 'javascript', 'gaming', 'network' ] for (let i = words.length; --i;) // shuffle Array { let j = Math.floor(Math.random() * (i + 1)); [words[i], words[j]] = [words[j], words[i]] } // get 2 random words console.log( words[0], words[1] ) Quiero devolver cada palabra en su propio botón como en la siguiente imagen: Cada vez que se selecciona un botón con onClick, quiero que la página se vuelva a mostrar con un nuevo conjunto de preguntas. ¿Cómo puedo hacer esto en React? 
2 Respuestas
Responde la pregunta0
Una versión simple de la aplicación, sin el CSS, se vería así:
import React, { useState } from 'react'; const defaultWords = [ 'monitor', 'program', 'application', 'keyboard', 'javascript', 'gaming', 'network'] const App = () => { const [words, setWords] = useState(defaultWords); const shuffleWords = () => { for (let i = words.length; --i;) { let j = Math.floor(Math.random() * (i + 1)); [words[i], words[j]] = [words[j], words[i]] } setWords([...words]); } return ( <div> <button onClick={shuffleWords}>{words[0]}</button> <button onClick={shuffleWords}>{words[1]}</button> </div> ); } export default App;Puedes probar el código en codesandbox: https://codesandbox.io/embed/sparkling-sunset-bstk7?fontsize=14&hidenavigation=1&theme=dark
0
Usaría los ganchos useEffect y useState para crear una matriz de palabras seleccionadas al azar.
Digamos, por ejemplo, que el primer argumento del enlace useState es randomWordPair , luego crearía una función que representaría los botones usando algo como:
const renderWordButtons = () => { return randomWordPair.map((word) => { return (<button onClick={(e) => handleOnClick(word)}>{word}</button>) ) }) }Entonces llamarías a esa función en el retorno del componente.