Javascript sorting array quiz

Question

const questions = [
  {
    questionText: "What is the capital of France?",
    answerOptions: [
      { answerText: "New York", isCorrect: false },
      { answerText: "London", isCorrect: false },
      { answerText: "Paris", isCorrect: true },
      { answerText: "Dublin", isCorrect: false }
    ].sort(() => Math.random() - 0.5), //it sorts but when clicked it generate new random values(position change which is not good) in answerOptions1
    answerOptions1: [
      { answerText: "New York1", isCorrect: false },
      { answerText: "London1", isCorrect: false },
      { answerText: "Paris1", isCorrect: true },
      { answerText: "Dublin1", isCorrect: false }
    ].sort(() => Math.random() - 0.5) //it sorts but when clicked it generate new random values in answerOptions
  },
{},
{}
]
.sort(() => Math.random() - 0.5) // this sorting is not working
;

codesanbox link: https://codesandbox.io/s/lucid-zeh-5ulr5z?file=/src/App.js

I need to sort questions, answerOptions and answerOptions1 array in random order. The .sort(() => Math.random() - 0.5) is not working for this logic. When answerOptions is clicked, it also generate new random position in answeOptions1. answerOptions and answerOptions1 should not change their position and data/value(when fetch from large list).

`sort(() => Math.random() - 0.5)` doesn't make sense. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description — evolutionxbox, May 11 '22 at 08:55
@evolutionxbox is right. The callback function in the sort method is supposed to return a value of 0, greater than 0 or less than 0 — orimdominic, May 11 '22 at 08:57
If you want to sort randomly check https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — Tanay, May 11 '22 at 09:01
Does this answer your question? [How to randomize (shuffle) a JavaScript array?](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) — evolutionxbox, May 11 '22 at 09:06

Pranavan · Answer 1 · 2022-05-11T09:31:41.767

Your randomly generated array will change in each render. use React useMemo hook to generate random array once.

const questions = useMemo(()=>[
  {
    questionText: "What is the capital of France?",
    answerOptions: useMemo(()=>[
      { answerText: "New York", isCorrect: false },
      { answerText: "London", isCorrect: false },
      { answerText: "Paris", isCorrect: true },
      { answerText: "Dublin", isCorrect: false }
    ].sort(() => Math.random() - 0.5), []), //it sorts but when clicked it generate new random values(position change which is not good) in answerOptions1
    answerOptions1: useMemo(()=>[
      { answerText: "New York1", isCorrect: false },
      { answerText: "London1", isCorrect: false },
      { answerText: "Paris1", isCorrect: true },
      { answerText: "Dublin1", isCorrect: false }
    ].sort(() => Math.random() - 0.5), []) //it sorts but when clicked it generate new random values in answerOptions
  },
{},
{}
].sort(() => Math.random() - 0.5), [])

Thanks, useMemo works for answerOptions and answerOptions1 array but not working with questions array. — jsancho, May 11 '22 at 09:26
I got error. please look at https://codesandbox.io/s/lucid-zeh-5ulr5z?file=/src/App.js — jsancho, May 11 '22 at 10:48

Javascript sorting array quiz

1 Answers1