Comparing Class and Functional components in React

stateful-stateless-components.js

// DiceRoll.js

import React, { Component } from 'react'
import Die from './Die'

class DiceRoll extends Component {
  constructor(props) {
    super(props)
    this.state = {dice: [4,5,6]}
  }

  roll = () => {
    const randomDice = this.state.dice.map((die) => {
      return this._getRndInteger(1, 6)
    })
    this.setState({dice: randomDice})
  }

  _getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
  }

  render() {
    return(
      <div className="dice-roll">
        <button onClick={this.roll}>Roll</button>
        {this.state.dice.map((die, index) => {
          return (
            <Die number={die} key={index} />
          )
        })}
      </div>
    )
  }
}


export default DiceRoll

// Die.js
import React from 'react'

function Die(props) {
  return (
    <div className="die">
      {props.number}
    </div>
  )
}

export default Die