我如何在 React 中动态更改 Fontawesome 图标？

Question

I am completely beginner at React. I am working on Dice Project Game. How can I change Fontawesome icons dynamically. Is it possible? this is my code.

Dice.js

const Dice = ({ face }) => {
      return (
        <div>
          <FaDiceOne className={`dice ${face}`} />
        </div>
      );
    };
      



  Dices.js
  
    const Dices = (props) => {
      const [face, setFace] = useState["one"];
      const RollDiceHandler = () => {
        const sides = ["one", "two", "three", "four", "five", "six"];
        let side = sides[Math.floor(Math.random() * sides.length)];
        setFace(side);
      };
    
      return (
        <div>
      
            <div className="first_dice">
              
              <Dice face={face} />
            </div>
            <div className="second_dice">
             
              <Dice face={face} />
            </div>
          </div>
            <button onClick={RollDiceHandler}>Roll the Dice</button>
                  
        </div>
      );
    };
 

Answer 1

Something like this will do it, although there are many improvements you can make.

const Dice = ({ face }) => {
    if (face === "one") {
      return (
        <div>
          <FaDiceOne className={`dice ${face}`} />
        </div>
      ); 
    }
if (face === "two") {
      return (
        <div>
          <FaDiceTwo className={`dice ${face}`} />
        </div>
      ); 
    }

};

Based on your code, the dice will always be the same value, since you only have one state variable for the face.