Rolling Dice with React State

Using what you have just learned about state in React, you are going to create a <DiceBox /> component that renders 5 dice numbers for the user to view.

You Must

  1. Create a class component called <DiceBox />
  2. Write a method in that class that produces 5 random numbers between 1 and 6 and saves them in state.
  3. Display the 5 random numbers in your <DiceBox /> JSX.
  4. Provide a button the user can click on that will redo step 2 and present the new numbers to the user.

Take it further

  1. Create a <Die /> component that receives a random number as a prop and displays it (rather than just displaying the 5 numbers in the <DiceBox /> JSX).
  2. Allow the user to click on a given <Die /> to select it, and that number will not change until the dice reset.
  3. Have the dice reset (de-selecting all previously selected die) after every 3rd roll.


React State