CODEWITHSUNDEEP
javascripthtmlreactjs
Undelivered
Undelivered

Reputation: 45

ReactJS map an array random

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) => (...

Upvotes: 0

Views: 3845

Answers (3)

Niels Bosman
Niels Bosman

Reputation: 956

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

Upvotes: 7

Kai Lehmann
Kai Lehmann

Reputation: 508

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

Upvotes: 1

michael
michael

Reputation: 4173

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))

Upvotes: -1

Related Questions