Tengo una función de reacción con un elemento ul y 4 Listitems. Quiero aleatorizar el orden de los elementos de la lista, pero no puedo pensar en la forma más fácil.
export default function Card({ question, answer, incorrect, headlinecount }) { return ( <CardStyle> <article> <h2>Question {headlinecount}</h2> <p>{question}</p> </article> <ChoiceStyle> <li>{incorrect[0]}</li> <li>{answer}</li> <li>{incorrect[1]}</li> <li>{incorrect[2]}</li> </ChoiceStyle> <ButtonDiv> <button type="button">Show Answer</button> <p>{answer}</p> </ButtonDiv> </CardStyle> ); }Tal vez en lugar de crear una variable separada para answer e incorrect , podría crear una sola matriz llamada answers con objetos como este:
[{ answer: "foo", correct: false }, { answer: "foo2", correct: true }, // More answers ]etc.
Luego, muestre elementos de esta matriz al azar y verifique el parámetro correct para ver si el usuario eligió la respuesta correcta. Bonificación adicional: esto también puede funcionar con múltiples respuestas correctas.
¡Buena suerte!
Hay muchas maneras de aleatorizar elementos dentro de una colección específica, pero definitivamente lo primero que debe hacer es crear una matriz (colección) de elementos para representar:
const choices = [ { label: "Choice 1", value: 1 }, { label: "Choice 2", value: 2 }, ... // you can get this data dynamically from any data source ];Y luego asigne estos datos en su componente:
export default function Card({ question, answer, incorrect, headlinecount }) { const renderChoice = ({ label }) => ( <li>{label}</li> ); return ( <CardStyle> <article> <h2>Question {headlinecount}</h2> <p>{question}</p> </article> <ChoiceStyle> {choices.map(renderChoice)} </ChoiceStyle> <ButtonDiv> <button type="button">Show Answer</button> <p>{answer}</p> </ButtonDiv> </CardStyle> ); }Con esa estructura, ahora puede mezclar su colección cada vez que inicia su componente. Puede familiarizarse con las posibles soluciones de barajado a partir de esa pregunta: ¿Cómo aleatorizar (barajar) una matriz de JavaScript?
Nota: es posible que deba memorizar su componente o resultados aleatorios, ya que cualquier renderizado de componente puede producir un cambio en el orden de las opciones.