I'm a React Beginner. I wanted to randomize options with every page load. Correct option is the first element of array.Correct MCQ option value keeps changing. Even tho I defined it before shuffle() array function. What i'm doing wrong?
React Version: ^17.0.2
import React from 'react';
import mcqContent from './mcq-content';
const MCQPage = ({match}) =>{
const reqUrl = match.params.name;
const mcqData = mcqContent.find(mcqData => mcqData.m_slug === reqUrl);
const correctMcq = mcqData.m_alternatives[0];
const optionsArray = mcqData.m_alternatives
const shuffledArray = shuffle(optionsArray)
return (
<>
<h1>{mcqData.m_title}</h1><br/>
<h3>{mcqData.m_question}</h3>
{shuffledArray.map((paragraph, key) => (
<p key={key}>{paragraph}</p>
))}
<h4>Answer: {correctMcq}</h4>
</>
);
};
export default MCQPage;
function shuffle(array) {
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle...
while (currentIndex !== 0) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
return array;
}
When you are passing an array as a function argument it's passed as a reference, meaning a reference to the original array. I think the safest solution would be to always make a copy of the original array inside the function and return the newly created and modified array (so no matter who is using the function the original array is never changed).
function shuffle(options) {
const array = [...options];
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle...
while (currentIndex !== 0) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
return array;
}