1

have been stuck on this for some time now. Working on React project for Table Tennis Game Generator. Struggling to find a solution to randomly shuffle an array of names, that have been entered by the user. It will not even console.log anything! Many thanks. 

import React, { Fragment } from "react";

const FixturesList = playerNamesArray => {
    let shuffledPlayers = [...playerNamesArray];

    let arr1 = shuffledPlayers.slice(); // copy array
    let arr2 = shuffledPlayers.slice(); // copy array again

    arr1.sort(function() {
       return 0.5 - Math.random();
    }); // shuffle arrays
    arr2.sort(function() {
      return 0.5 - Math.random();
    });

    while (arr1.length) {
        let player1 = arr1.pop(), // get the last value of arr1
        player2 = arr2[0] === player1 ? arr2.pop() : arr2.shift();
        //        ^^ if the first value is the same as name1,
        //           get the last value, otherwise get the first
        console.log(player1 + " gets " + player2);
    }

    return (
        <Fragment>
             <section>
                 <h1>Fixtures</h1>
             </section>
        </Fragment>
    );
};

export default FixturesList;
Raeesaa
  • 3,267
  • 2
  • 22
  • 44
Junior SCM
  • 33
  • 1
  • 4
  • Why not just randomize the whole array and pop pairs from it? – jvdh Sep 25 '18 at 11:46
  • What exactly is the problem? Everything between the definition of `let arr1 = ...` and `return ()` work as you describe, so the issue is either that your arrays do not contain what you say they do, or that the imports do not work, or the return-to-render part of react. – Shilly Sep 25 '18 at 11:46
  • Good point jvdh, I a I bit stuck as to how I would do that though? – Junior SCM Sep 25 '18 at 12:10
  • I have now rectified the console.log issue, however I am looking to just randomize the array they grab pairs from it. Any help regarding this would be amazing – Junior SCM Sep 25 '18 at 12:10

1 Answers1

2

I love using .sort with Math.random

const players = ['John', 'Jack', 'Anne', 'Marry', 'Mike', 'Jessica'];

players.sort(() => 0.5 - Math.random());

const pairs = [];

// as we need at least players to form a pair
while (players.length >= 2) { 
  const pair = [players.pop(), players.pop()];

  // Current pair
  console.log('Single pair', pair);

  // Save current pair
  pairs.push(pair);
}

// All pairs
console.log('All pairs', pairs);

I guess you already know this but random will return number between 0 and 1 (not including 1) so this sorting function will randomly return number between -0.5 and 0.5 shuffling the array.

Pop will return the last item from the array and remove it from the array. We pop two times to get a pair.

Hope that helps!

Continued from the comment.

To render it, I would create a component, and pass pairs to it. This is essential React and something you will be doing a lot.

import React from 'react';

component Pairs extends React.component
  renderPairs() {
    // pass pairs as prop
    return this.props.pairs.map(pair => {
      return (
        <li key={ pair.join('-') }>
          { pair.join(' vs ') }
        </li>
      )
    });
  }

  return (
    <ul>
      { this.renderPairs() }
    </ul>
  )
}

// Use it like this
// <Pairs pairs={ pairs } />
Stanko
  • 1,331
  • 12
  • 8