Reactjs: Pressing button to randomize an array

Question

Basically, I am trying to make a card program that would pick five cards out of 52 in random. These cards must not repeat. I have already figured out the randomizer through traditional javascript. However, I am using ReactJs to make a button which if pressed, would create a new set of five cards.

class Reset extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...};
  }

  handleClick() {...}

  render() {
    return <button onClick={this.handleClick}>{...}</button>;
  }
}

const cards = [
  "A♥",
  "A♠",
  "A♦",
  "A♣",
  "2♣",
  "3♣",
  "4♣",
  "5♣",
  "6♣",
  "7♣",
  "8♣",
  "9♣",
  "10♣",
  "K♣",
  "Q♣",
  "J♣",
  "2♦",
  "3♦",
  "4♦",
  "5♦",
  "6♦",
  "7♦",
  "8♦",
  "9♦",
  "10♦",
  "K♦",
  "Q♦",
  "J♦",
  "2♥",
  "3♥",
  "4♥",
  "5♥",
  "6♥",
  "7♥",
  "8♥",
  "9♥",
  "10♥",
  "K♥",
  "Q♥",
  "J♥",
  "2♠",
  "3♠",
  "4♠",
  "5♠",
  "6♠",
  "7♠",
  "8♠",
  "9♠",
  "10♠",
  "K♠",
  "Q♠",
  "J♠"
];
var hand = [];

function in_array(array, el) {
  for (var i = 0; i < array.length; i++) if (array[i] == el) return true;
  return false;
}

function get_rand(array) {
  var rand = array[Math.floor(Math.random() * array.length)];
  if (!in_array(hand, rand)) {
    hand.push(rand);
    return rand;
  }
  return get_rand(array);
}

for (var i = 0; i < 5; i++) {
  document.write(get_rand(cards));
}

ReactDOM.render(<Reset />, document.getElementById("root"));

Basically, what would I have to fill in the parts with "..." in order for the code to rerandomize the pack.

hi bigboyopiro, just wrote you an answer, let me know if you have any questions. — Cat_Enthusiast
– Cat_Enthusiast, Commented May 15, 2019 at 7:05

Cat_Enthusiast · Accepted Answer · 2019-05-15 07:37:29Z

1

Try something like this, I'm preserving alot of the code you already wrote. You really just have to move that logic into the handler.

Here's the sandbox as well: https://codesandbox.io/s/yv93w19pkz

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = { 
        cards: ["A♥", "A♠", "A♦", "A♣", "2♣", "3♣", "4♣", "5♣", "6♣", "7♣", "8♣", "9♣", "10♣", "K♣", "Q♣", "J♣", "2♦", "3♦", "4♦", "5♦", "6♦", "7♦", "8♦", "9♦", "10♦", "K♦", "Q♦", "J♦", "2♥", "3♥", "4♥", "5♥", "6♥", "7♥", "8♥", "9♥", "10♥", "K♥", "Q♥", "J♥", "2♠", "3♠", "4♠", "5♠", "6♠", "7♠", "8♠", "9♠", "10♠", "K♠", "Q♠", "J♠"],
        hand: [] 
      }

       this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    const cards = this.state.cards

    const newHand = []

    function get_rand(array) {
       var rand = array[Math.floor(Math.random() * array.length)];
       if (!newHand.includes(rand)) {
          newHand.push(rand);
       } else {
         get_rand(cards);
       }
     }

    for (var i = 0; i < 5; i++) {
       get_rand(cards);
    }

    this.setState({
      hand: newHand
    })

  }

  render() {
    const { hand } = this.state
      return (
        <div>
          { hand ? (hand.map((card) => {
            return <p>{card}</p>
           })) : (
            null
          )}
          <button onClick={this.handleClick}>Randomize
          </button>
        </div>
      );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

edited May 15, 2019 at 7:37

answered May 15, 2019 at 7:05

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JkAlombro Over a year ago

I agree with this approach but your sandbox contains his old code. Is that intentional?

Cat_Enthusiast Over a year ago

@JkAlombro. Do you mean my old files haha. I'll delete that in a second, was just using my old sandbox as an example

Cat_Enthusiast Over a year ago

@bigboyopiro, just realized I forgot to put a tiny piece of logic with the off-chance you might get duplicate cards. Check the sandbox to make sure, or you can add in your original in_array method as well :)

jayanth · Accepted Answer · 2019-05-15 06:53:26Z

0

Try to declare the cards in the state and update when you click on it

answered May 15, 2019 at 6:53

jayanth

624 bronze badges

Collectives™ on Stack Overflow

Reactjs: Pressing button to randomize an array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related