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

0

273
Views
Renderizar matriz en orden aleatorio React Js

Soy un principiante de React Js. Estoy creando un Portal MCQ y quería mostrar las opciones de mcqs en orden aleatorio.

  1. En este momento estoy usando el archivo .js para los datos, pero luego planeo cambiar a MongoDB.
  2. Estoy usando el parámetro de URL para recuperar MCQ específico. ¿Hay alguna manera de barajar la matriz?


aquí está el código

 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;

Aquí está el archivo de contenido de MCQ

 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;
over 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