React State Array Altered After Deployment

Question

My dice roll app rolls the dice and logs the previous rolls.

You can see the app on github pages: https://mtrussell.github.io/dice-roll-app/

To see all the app's code, here is the repo: https://github.com/mtrussell/dice-roll-app

The RollDice component adds the current roll to the rolls array. The PrevRolls component reverses the array and maps it to the jsx elements.

The problem is that when I deployed it to github pages it behaves differently than on my local machine. It seems to alter the array after a second, flipping it back around.

I thought that it had something to do with the button timeout, but I removed that completely and the wonky behavior persisted.

I have tried restructuring my code in a number of different ways, but nothing seems to fix it.

RollDice Component -

import React, { Component } from 'react';
import Die from './Die';
import PrevRolls from './PrevRolls';
import './RollDice.css';

class RollDice extends Component {
  static defaultProps = {
    sides: ['one', 'two', 'three', 'four', 'five', 'six']
  }

  constructor(props) {
    super(props);
    this.state = {
      die1: 'one',
      die2: 'two',
      rolling: false,
      rolls: []
    }
    this.handleClick = this.handleClick.bind(this);
  }

  randomDice() {
    const newDie1 = this.props.sides[
      Math.floor(Math.random() * this.props.sides.length)
    ];
    const newDie2 = this.props.sides[
      Math.floor(Math.random() * this.props.sides.length)
    ];
    return [newDie1, newDie2];
  }

  roll(dice) {
    this.setState(prevState => {
      return {
        die1: dice[0], 
        die2: dice[1], 
        rolling: true,
        rolls: [...prevState.rolls, {first: dice[0], second: dice[1]}]
      }     
    });
  }

  handleClick() {
    const dice = this.randomDice();
    this.roll(dice);
    setTimeout(() => {
      this.setState({
        rolling: false,
      });
    }, 1000);
  }


  render() {
    let rollButton = this.state.rolling ? 'Rolling...' : 'Roll Dice!';

    return(
      <div className='RollDice'>
        <div className='RollDice-dice'>
          <Die face={this.state.die1} rolling={this.state.rolling} />
          <Die face={this.state.die2} rolling={this.state.rolling} />
        </div>
        <button onClick={this.handleClick} disabled={this.state.rolling}>{rollButton}</button>
        <PrevRolls rolls={this.state.rolls} />
      </div>
    );
  }
}

export default RollDice;

PrevRolls Component -

import React, { Component } from 'react';
import './PrevRolls.css'

class PrevRolls extends Component {
  constructor() {
    super();
    this.displayRolls = this.displayRolls.bind(this);
  }

  reverseRolls() {
    return this.props.rolls.reverse();
  }

  displayRolls() {
    return this.reverseRolls().map((roll, index) => (
      <p>
        Roll {this.props.rolls.length - index} <i className={`fas fa-dice-${roll.first}`} ></i> <i className={`fas fa-dice-${roll.second}`} ></i>
      </p>
    ));
  }

  render() {
    return(
      <div className='PrevRolls'>
        <div className='PrevRolls-list'>
          {this.displayRolls()}
        </div>
      </div>
    );
  }
}

export default PrevRolls;

Answer 1

Thanks to xadm, I got this figured out. reverse() was altering the parent component's array.

I changed the way I was setting the state in the roll() function in the RollDice component.

In the PrevRolls component I removed the reverseRolls() function and its function call in the displayRolls() function.

RollDice Component -

roll(dice) {
    this.setState(prevState => {
      return {
        die1: dice[0], 
        die2: dice[1], 
        rolling: true,
        rolls: [{first: dice[0], second: dice[1]}, ...prevState.rolls]
      }     
    });
  }

PrevRolls Component -

displayRolls() {
    return this.props.rolls.map((roll, index) => (
      <p>
        Roll {this.props.rolls.length - index} <i className={`fas fa-dice-${roll.first}`} ></i> <i className={`fas fa-dice-${roll.second}`} ></i>
      </p>
    ));
  }