diff --git a/package-lock.json b/package-lock.json
index 33e2a1b..19a2d7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3684,6 +3684,17 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/ansi-escapes/node_modules/type-fest": {
+ "version": "0.21.3",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+ "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/ansi-html": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -18538,9 +18549,11 @@
}
},
"node_modules/type-fest": {
- "version": "0.21.3",
- "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
- "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+ "version": "0.13.1",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+ "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+ "optional": true,
+ "peer": true,
"engines": {
"node": ">=10"
},
@@ -23446,6 +23459,13 @@
"integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
"requires": {
"type-fest": "^0.21.3"
+ },
+ "dependencies": {
+ "type-fest": {
+ "version": "0.21.3",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+ "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
+ }
}
},
"ansi-html": {
@@ -34973,9 +34993,11 @@
"integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g=="
},
"type-fest": {
- "version": "0.21.3",
- "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
- "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
+ "version": "0.13.1",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+ "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+ "optional": true,
+ "peer": true
},
"type-is": {
"version": "1.6.18",
diff --git a/src/GuessControl.js b/src/GuessControl.js
index 64108b5..5f30c1f 100644
--- a/src/GuessControl.js
+++ b/src/GuessControl.js
@@ -1,47 +1,38 @@
-import React, { Component } from "react";
+// import the useState hook from React.
+import React, { useState } from "react";
import Button from "./Button";
-class GuessControl extends Component {
- constructor(props) {
- super(props);
- this.state = {
- currentGuess: "",
- };
+// define a new function component called GuessControl that takes an onGuess prop
+function GuessControl({ onGuess }) {
- /**
- * These lines are required to make the methods/functions declared on this
- * class have the correct `this` object when they run.
- */
- this.handleInputChange = this.handleInputChange.bind(this);
- this.onSubmitGuess = this.onSubmitGuess.bind(this);
- }
+ // create a state variable called currentGuess using the useState hook
+ // Replace with setCurrentGuess
+ const [currentGuess, setCurrentGuess] = useState("");
- handleInputChange(event) {
- this.setState({ currentGuess: event.target.value });
- }
- onSubmitGuess() {
- // Since the values from an HTML input are strings by default,
- // convert to a number for the returned guess value
- // by passing in the string to the Number function.
- // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
- this.props.onGuess(Number(this.state.currentGuess));
- this.setState({ currentGuess: "" });
- }
+ // create a new function called handleInputChange that updates the currentGuess
+ const handleInputChange = (event) => {
+ setCurrentGuess(event.target.value);
+ };
- render() {
- return (
-
-
-
-
- );
- }
+ // create a new function called onSubmitGuess
+ const onSubmitGuess = () => {
+ // Convert currentGuess to a number and call onGuess prop
+ onGuess(Number(currentGuess));
+ setCurrentGuess("");
+ };
+ // return the JSX that was originally in the render
+ return (
+
+
+
+
+ );
}
export default GuessControl;
diff --git a/src/NumberGuessingGame.js b/src/NumberGuessingGame.js
index 07c5a24..c7e776d 100644
--- a/src/NumberGuessingGame.js
+++ b/src/NumberGuessingGame.js
@@ -1,77 +1,55 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
import GuessControl from "./GuessControl";
import GuessMessage from "./GuessMessage";
import GameOver from "./GameOver";
-/**
- *
- * Returns a random integer number from 1-100 inclusive
- */
function getRandomNumber() {
return Math.floor(Math.random() * 100) + 1;
}
const MAX_ATTEMPTS = 5;
-class NumberGuessingGame extends Component {
- constructor(props) {
- super(props);
+function NumberGuessingGame() {
- this.state = {
- numberToGuess: getRandomNumber(),
- numberOfGuesses: 0,
- latestGuess: null,
- };
+ // Create 3 state variables and their setters for numberToGuess, numberOfGuesses,
+ // and latestGuess and initialize them to the same values from the class component version.
+ const [numberToGuess, setNumberToGuess] = useState(getRandomNumber());
+ const [numberOfGuesses, setNumberOfGuesses] = useState(0);
+ const [latestGuess, setLatestGuess] = useState(null);
- /**
- * These lines are required to make the methods/functions declared on this
- * class have the correct `this` object when they run.
- */
- this.handleGuess = this.handleGuess.bind(this);
- this.handleReset = this.handleReset.bind(this);
- }
- handleGuess(guess) {
- this.setState({
- latestGuess: guess,
- numberOfGuesses: this.state.numberOfGuesses + 1,
- });
+ // Create a handleGuess function that will be passed in to
+ // the GuessControl component as the onGuess prop
+ function handleGuess(guess) {
+ setLatestGuess(Number(guess));
+ setNumberOfGuesses(numberOfGuesses + 1);
}
-
- handleReset() {
- this.setState({
- numberToGuess: getRandomNumber(),
- numberOfGuesses: 0,
- latestGuess: null,
- });
+ // Create a handleReset function within the component that resets all 3 of the state properties
+ // the same way the handleReset function from the class component reset them
+ function handleReset() {
+ setNumberToGuess(getRandomNumber());
+ setNumberOfGuesses(0);
+ setLatestGuess(null);
}
- render() {
- const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess;
-
- const isGameOver =
- isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS;
-
- return (
-
-
I'm thinking of a number from 1 to 100.
-
- Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
-