4prktk

Die:

import React, { Component } from "react";

export default class Die extends Component {
  render() {
    const firstDieImage = require(`./assets/${this.state.die1}.png`);
    return (
      <img src = {firstDieImage}
        className={`fas fa-dice-${this.props.face} ${
          this.props.rolling ? "shaking" : ""
        }`}

      />
    );
  }
}


index:


import React, { Component } from "react";
import ReactDOM from "react-dom";
import Die from "./Die";

//import "./styles.css";
class RollDice extends Component {

  static defaultProps = {
    sides: [1, 2, 3, 4, 5, 6]
  };
  state = {
    die1: 1,
    die2: 2,
    rolling: false
  };

  roll = () => {


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

    this.setState({
      die1: newDie1,
      die2: newDie2,
      rolling: true
    });

    setTimeout(() => {
      this.setState({ rolling: false });
    }, 1000);
  };

  render() {


    return (

      <div className="roll-dice">
        <div className="roll-dice-container">
          <Die face={this.state.die1} rolling={this.state.rolling} />
          <Die face={this.state.die2} rolling={this.state.rolling} />
        </div>
        <button onClick={this.roll} disabled={this.state.rolling}>
          {this.state.rolling ? "Rolling..." : "Roll Dice!"}
        </button>
        {this.state.die1} abc {this.state.die2} cda
      </div>
    );
  }
}

const rootElement = document.getElementById("app");
ReactDOM.render(<RollDice />, rootElement);