• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

251
Vistas
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;
almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda