React - Randomize List Order

Question

I have a react function with a ul-element and 4 Listitems. I want to randomize the order of the list items, but I cant think about the easiest way.

export default function Card({ question, answer, incorrect, headlinecount }) {

  return (
    <CardStyle>
      <article>
        <h2>Question {headlinecount}</h2>
        <p>{question}</p>
      </article>
      <ChoiceStyle>
        <li>{incorrect[0]}</li>
        <li>{answer}</li>
        <li>{incorrect[1]}</li>
        <li>{incorrect[2]}</li>
      </ChoiceStyle>
      <ButtonDiv>
        <button type="button">Show Answer</button>
        <p>{answer}</p>
      </ButtonDiv>
    </CardStyle>
  );
}

Add list items on an array, shuffle it & then display it – Arif Khan Apr 18 '22 at 09:22 — Arif Khan, Apr 18 '22 at 09:22

score 2 · Answer 1 · answered Apr 18 '22 at 09:28

Maybe instead of creating a separate variable for answer and incorrect, you could create a single array called answers with objects like this:

[{
  answer: "foo",
  correct: false
},
{
  answer: "foo2",
  correct: true
},
// More answers
]

etc.

Then, display items from this array randomly and check the correct parameter to see if the user chose the right answer. Added bonus: this can also work with multiple correct answers.

Good luck!

score 2 · Answer 2 · answered Apr 18 '22 at 09:38

There many ways to randomise items within specific collection, but definitely the very first thing you need to do - is to create and array (collection) of elements to render:

const choices = [
  { label: "Choice 1", value: 1 },
  { label: "Choice 2", value: 2 },
  ...
  // you can get this data dynamically from any data source
];

And then map this data in your component:



export default function Card({ question, answer, incorrect, headlinecount }) {
  const renderChoice = ({ label }) => (
    <li>{label}</li>
  );

  return (
    <CardStyle>
      <article>
        <h2>Question {headlinecount}</h2>
        <p>{question}</p>
      </article>
      <ChoiceStyle>
        {choices.map(renderChoice)}
      </ChoiceStyle>
      <ButtonDiv>
        <button type="button">Show Answer</button>
        <p>{answer}</p>
      </ButtonDiv>
    </CardStyle>
  );
}

With that structure you are now able to shuffle your collection any time you init your component. You can become familiar with possible shuffling solutions from that question: How to randomize (shuffle) a JavaScript array?

Note: you may need to memoize your component or shuffled results since any component re-render may produce change of the choices order.

React - Randomize List Order

2 Answers2