• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

252
Views
Render Array in Random Order React Js

I'm a React Js Beginner. I'm creating a MCQ Portal and wanted to display mcqs options in random order.

  1. Right Now I'm using .js file for data But later planning to shift to MongoDB.
  2. I'm using URL Parameter to retrieve specific MCQ. Is there a way to shuffle array?


Here's the code

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];
    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;
      }
    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; 

Here's the MCQ Content File

const mcqs = [
    {
        "_id":1,
        "m_title":"Which company is the most valueable in the world?",
        "m_slug":"which-company-is-the-most-valueable",
        "m_question":"Which company is the most valueable in the world?",
        "m_alternatives":["Apple","Google","Microsoft"],
        "m_number":"Gen-Know-1",
        "m_subject":"General Knowledge",
    },  
];

export default mcqs;
almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error