CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Aquiles Bailo
Aquiles Bailo

Reputation: 121

Reset button is not working on react hooks

I have a number guessing game in React, the reset button is not clearing the fields. This is my code:

import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";

let luckyNumber = Math.floor(Math.random() * 100) + 1;

function GuessingGame() {
  const [guess, setGuess] = useState("");
  const [count, setCount] = useState(0);
  const [guesses, setGuesses] = useState([]);
  const [luckyN, setLuckyN] = useState(luckyNumber);
  const [message, setMessage] = useState(" Start guessing...");
  const [disabled, setDisabled] = useState(false);

  const handlerValueChange = (event) => {
    setGuess(event.target.value);
  };

  const submitHandler = () => {
    if (+luckyNumber === +guess) {
      setMessage(" Congratulations! You guessed the Lucky Number!.");
      setDisabled(true);
    } else if (count === 2) {
      setMessage(" Game over, maximum guess attempts have been reached.");
      setDisabled(true);
    } else if (luckyNumber < guess) {
      setMessage(" Guess is too high.");
    } else if (luckyNumber > guess) {
      setMessage(" Guess is too low.");
    }

    setCount(count + 1);
    setGuesses([...guesses, guess]);
  };

  const resetBtn = () => {
    setDisabled(false);
    setGuess = 0;
    setCount = 0;
    guess = ('')
    message = "";
    setGuess = ([])
    setLuckyN = (0);
    setMessage = (' Start guessing...');
    setLuckyN(Math.floor(Math.random()* 100) + 1)
  };

  return (
    <>
      <h4>
        I am thinking of a number between 1 and 100. Guess the Lucky Number!
      </h4>
      <p>You have made {count} guesses </p>
      <p>Your guess is too high! Your guess is too low!</p>
      <p> Your current guess is {guess}</p>

      <Form>
        <Form.Control
          disabled={disabled}
          type="text"
          value={guess}
          onChange={handlerValueChange}
        ></Form.Control>
        <Button disabled={disabled} onClick={submitHandler}>
          Guess
        </Button>
        <br />
        <br />
        <Button onClick={resetBtn}>Reset</Button>
      </Form>

      <p>message:{message}</p>
      <p>Total plays: {count}</p>
      <p>You are trying to guess this lucky number: {luckyNumber}!</p>
      <p>Your guesses: </p>

      {guesses?.map((item, index) => {
        return <span key={index}>{item} </span>;
      })}
    </>
  );
}

export default GuessingGame;

The button needs to clear the fields, load the random number and start again, it is not doing that and even after the validation of 3 incorrect attempts, if I hit reset and hit guess again, the count keeps going and the program runs like if there is no validation...

Any helps with this? Thanks!!

Upvotes: 0

Views: 275

Answers (1)

Jordan Daniels
Jordan Daniels

Reputation: 5304

Call the setStates as a function, not as an assignment in your resetBtn function.

For example:

const resetBtn = () => {
  setDisabled(false);
  setCount(0);
  setGuess(0);
  setMessage('');
  setGuess([])
  setLuckyN(0);
  setMessage(' Start guessing...');
  setLuckyN(Math.floor(Math.random()* 100) + 1);
};

Upvotes: 3

Related Questions