ReactJS map an array random

Question

I've been trying to map an array in a random way. I want every object of the array to show up. But the order should always be different and random on refresh.

const [ list ] = [
        {id: 0, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 1, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 2, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 3, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 4, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 5, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 6, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 7, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 8, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 9, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false}
    ];

 {list.map((item) => (...

How do you define random? Did you make an attempt already that did not give you desired results? — Brian Thompson, Nov 17 '20 at 20:14
BTW... const [ list ] = [ x, y, z] ends in list beeing x; I think you want const list = [ x, y, z]; — Kai Lehmann, Nov 17 '20 at 21:03
See https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array, to choose an efficient and correct implementation of the shuffle operation — z1ne2wo, Nov 17 '20 at 21:27

Niels Bosman · Accepted Answer · 2021-09-29T19:21:17.650

I think it would be more useful to shuffle the array. And you should also change the definition of the constant.

You could try something like this:

const shuffle = arr => [...arr].sort(() => Math.random() - 0.5);

const list = [
  {id: 0, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},
  {id: 1, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},
  {id: 2, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},
  {id: 3, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},
  {id: 4, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},
  {id: 5, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},
  {id: 6, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},
  {id: 7, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},
  {id: 8, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false},
  {id: 9, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false}
];

const newList = shuffle(list);

console.log(newList);

Shuffling the array is a bad idea in react because react uses immutable data paradigm. — Kai Lehmann, Nov 17 '20 at 20:44
I didn't want to turn this into such a big discussion! :D But thank you for your solution. This way it works out. The last problem ist, that on every state change it shuffles again — Undelivered, Nov 17 '20 at 21:32

score 1 · Answer 2 · answered Nov 17 '20 at 20:56

Here is a pure function with immutable data paradigm:

const shuffleArray = (arr) => {
    // leave arr as it is (immutable data in react)
    const copy = [...arr];
    // our output array
    const output = [];
    // while there are items
    while (copy.length > 0) {
        // removes 1 random element from copy and adds it to output;
        output.push(copy.splice(Math.floor(Math.random() * copy.length), 1));
    }
    // return our random array
    return output;
};

score -1 · Answer 3 · answered Nov 17 '20 at 20:15

You should build a function to shuffle items randomly. Try below.

const list = [
        {id: 0, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 1, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 2, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 3, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 4, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 5, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 6, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 7, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 8, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false},
        {id: 9, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false}
    ];
    
const shuffle = array => {
  let currentIndex = array.length,
    temporaryValue,
    randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
};

console.log(shuffle(list))

react uses immutable data paradigm. Shuffling the array is a bad idea. — Kai Lehmann, Nov 17 '20 at 20:46
He asked explicitly for a mapping function. your funtion isnt mapping, its just manipulation the original data — Kai Lehmann, Nov 17 '20 at 21:10

ReactJS map an array random

3 Answers3