Estoy trabajando en un proyecto de rodillo de dados que cambia las caras de dos dados con un clic de botón. El dado es a la vez un ícono de Font Awesome que cambia la cara dado un nombre de clase determinado (es decir, "fas fa-dice-six" representa el lado con seis puntos).

Aquí está el código que tengo hasta ahora para el componente DiceRoll:

 import "./RollDice.css"; import React, { useState } from "react"; import Die from "../Die/Die"; /** * @returns a parent component (rendered by App) * that renders the dice and a button to roll */ const RollDice = () => { let sides = ["one", "two", "three", "four", "five", "six"]; /** sets both die faces to be one at initial render */ let [dice, setDice] = useState({ dieOne: "one", dieTwo: "one", }); const handleRollClick = () => { /** variables for each die that generates a random number for the face */ let randomDieOne = sides[Math.floor(Math.random() * sides.length)]; let randomDieTwo = sides[Math.floor(Math.random() * sides.length)]; /** sets the state of each die to a random number on click */ setDice({ dieOne: randomDieOne, dieTwo: randomDieTwo }); console.log("randomDieOne:", randomDieOne); console.log("randomDieTwo:", randomDieTwo); }; return ( <div> <Die face={dice.dieOne} /> <Die face={dice.dieTwo} /> <button onClick={handleRollClick}>Roll Dice</button> </div> ); }; export default RollDice;

Aquí está el código que tengo hasta ahora para el componente DiceRoll:

 import React, { useState } from "react"; import RollDice from "../RollDice/RollDice"; import "./Die.css"; /** * @returns an individual die that takes props and * displays the correct face of the die based on props */ const Die = ({ face }) => { console.log("face", face); return ( <div className="dice die-icon"> <i className={`fas fa-dice-${face}`}></i> </div> ); }; export default Die;

Tengo un controlador para hacer clic en el botón "rodar" que actualiza el estado de la cadena de números al final del Nombre de la clase del icono. Cuando cierro la sesión del estado actualizado del dado, se cierran nuevos números aleatorios; sin embargo, los cambios no se muestran en la pantalla, lo que significa que los nombres de clase de los íconos no cambian cuando se hace clic en el botón.

¿Alguien ve dónde me puedo haber equivocado?