React Rock, paper, scissors app - not updating after each click-CodePudding

I'm not sure what I'm doing wrong here, clicking a button displays the result of the previous button that is being pressed, not the current button... The console displays completely different results to what im seeing on the page when i add console.logs to the handleClick function.

import { useState } from "react";
import "./App.css";
import { playRound, computerPlay } from "./utils/rps";

  function App() {
  const [playerSelection, setPlayerSelection] = useState("");
  const [CPUselect, setCPUselect] = useState("");
  const [results, setResult] = useState("");

  const handleClick = (e) => {
    setPlayerSelection(e.target.value);
    setCPUselect(computerPlay());
    setResult(playRound(playerSelection, CPUselect));
  };
  return (
    <>
      <div>
        <h1>RPS!</h1>
        <div>
          <p>You Chose {playerSelection}</p>
          <p>Computer Chose {CPUselect}</p>
          <p>{results}</p>
          <p>
            <button value={"Rock"} onClick={handleClick}>
              Rock
            </button>
            <button value={"Paper"} onClick={handleClick}>
              Paper
            </button>
            <button value={"Scissors"} onClick={handleClick}>
              Scissors
            </button>
          </p>
        </div>
      </div>
    </>
  );
}

export default App;

and the JS file with functions:

export const computerPlay = () => {
  const num = Math.floor(Math.random() * 3);
  if (num === 0) {
    return "Rock";
  } else if (num === 1) {
    return "Scissors";
  } else if (num === 2) {
    return "Paper";
  }
};

export const playRound = (playerSelection, computerSelection) => {
  if (playerSelection === computerSelection) {
    return "Draw!";
  }
  if (
    (playerSelection === "Rock" && computerSelection === "Scissors") ||
    (playerSelection === "Scissors" && computerSelection === "Paper") ||
    (playerSelection === "Paper" && computerSelection === "Rock")
  ) {
    return "You win! "   playerSelection   " beats "   computerSelection;
  } else {
    return "You Lose! "   computerSelection   " beats "   playerSelection;
  }
};

CodePudding user response：

React batches state changes, they do not happen in a predictable synchronous way. You need to wait for React to actually change the state before computing the score and use the setResult function.

This is where the useEffect hook comes in handy. The first argument is a callback and the second is dependency list. Basically, whenever an element of the list changes (the playerSelection and the CPUselect value in this case), React is going to call the function passed to the useEffect hook.

  const [playerSelection, setPlayerSelection] = useState("");
  const [CPUselect, setCPUselect] = useState("");
  const [results, setResult] = useState("");

  const handleClick = (e) => {
    setPlayerSelection(e.target.value);
    setCPUselect(computerPlay());
  };

  useEffect(() => {
    setResult(playRound(playerSelection, CPUselect));
  }, [playerSelection, CPUselect]);