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).
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), [])