diff --git a/src/App.js b/src/App.js
index 4c99985..4ff0b2d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,13 @@
-import React, { Component } from "react";
+import React from "react";
 import NumberGuessingGame from "./NumberGuessingGame";
 import "./App.css";
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <NumberGuessingGame />
-      </div>
-    );
-  }
-}
+const App = () => {
+	return (
+		<div className="App">
+			<NumberGuessingGame />
+		</div>
+	);
+};
 
 export default App;
diff --git a/src/GuessControl.js b/src/GuessControl.js
index 64108b5..9f199e8 100644
--- a/src/GuessControl.js
+++ b/src/GuessControl.js
@@ -1,47 +1,73 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import Button from "./Button";
 
-class GuessControl extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      currentGuess: "",
-    };
-
-    /**
-     * 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);
-  }
-
-  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: "" });
-  }
-
-  render() {
-    return (
-      <div>
-        <input
-          type="number"
-          value={this.state.currentGuess}
-          onChange={this.handleInputChange}
-        />
-        <Button onClick={this.onSubmitGuess}>Submit Guess</Button>
-      </div>
-    );
-  }
-}
-
-export default GuessControl;
+const GuessControl = ({onGuess}) => {
+  const [currentGuess, setCurrentGuess] = useState("");
+
+  function handleInputChange(e) {
+		setCurrentGuess(e.target.value);
+	}
+
+  function onSubmitGuess() {
+		onGuess(parseInt(currentGuess));
+		setCurrentGuess("");
+	}
+
+  return (
+		<div>
+			<input
+				type="number"
+				value={currentGuess} 
+				onChange={handleInputChange}
+			/>
+			<Button onClick={onSubmitGuess}>Submit Guess</Button>
+		</div>
+	);
+
+};
+
+
+// class GuessControlOld extends Component {
+//   constructor(props) {
+//     super(props);
+
+//     this.state = {
+//       currentGuess: "",
+//     };
+
+//     /**
+//      * 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);
+//   }
+
+//   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: "" });
+//   }
+
+//   render() {
+//     return (
+//       <div>
+//         <input
+//           type="number"
+//           value={this.state.currentGuess}
+//           onChange={this.handleInputChange}
+//         />
+//         <Button onClick={this.onSubmitGuess}>Submit Guess</Button>
+//       </div>
+//     );
+//   }
+// }
+
+export default GuessControl;
\ No newline at end of file
diff --git a/src/NumberGuessingGame.js b/src/NumberGuessingGame.js
index 07c5a24..723562d 100644
--- a/src/NumberGuessingGame.js
+++ b/src/NumberGuessingGame.js
@@ -1,77 +1,111 @@
-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);
-
-    this.state = {
-      numberToGuess: getRandomNumber(),
-      numberOfGuesses: 0,
-      latestGuess: 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,
-    });
-  }
-
-  handleReset() {
-    this.setState({
-      numberToGuess: getRandomNumber(),
-      numberOfGuesses: 0,
-      latestGuess: null,
-    });
-  }
-
-  render() {
-    const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess;
-
-    const isGameOver =
-      isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS;
-
-    return (
-      <div>
-        <h2>I'm thinking of a number from 1 to 100.</h2>
-        <h2>
-          Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
-        </h2>
-        <GuessControl onGuess={this.handleGuess} />
-        {isGameOver && (
-          <GameOver hasWon={isCorrectGuess} onReset={this.handleReset} />
-        )}
-        {!isGameOver && (
-          <GuessMessage
-            guess={this.state.latestGuess}
-            numberToGuess={this.state.numberToGuess}
-            numberOfGuesses={this.state.numberOfGuesses}
-          />
-        )}
-      </div>
-    );
-  }
-}
+const NumberGuessingGame = () => {
+	const [numberToGuess, setNumberToGuess] = useState(getRandomNumber());
+	const [numberOfGuesses, setNumberOfGuesses] = useState(0);
+	const [latestGuess, setLatestGuess] = useState(null);
+
+	function handleGuess(guess) {
+		setLatestGuess(Number(guess));
+		setNumberOfGuesses(numberOfGuesses + 1);
+	}
+
+	function handleReset() {
+		setNumberToGuess(getRandomNumber());
+		setNumberOfGuesses(0);
+		setLatestGuess(null);
+	}
+
+	const isCorrectGuess = latestGuess === numberToGuess;
+	const isGameOver = isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS;
+
+	return (
+		<div>
+			<h2>I'm thinking of a number from 1 to 100.</h2>
+			<h2>
+				Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
+			</h2>
+			<GuessControl onGuess={handleGuess} />
+			{isGameOver && <GameOver hasWon={isCorrectGuess} onReset={handleReset} />}
+			{!isGameOver && (
+				<GuessMessage
+					guess={latestGuess}
+					numberToGuess={numberToGuess}
+					numberOfGuesses={numberOfGuesses}
+				/>
+			)}
+		</div>
+	);
+};
+
+// class NumberGuessingGameOld extends Component {
+//   constructor(props) {
+//     super(props);
+
+//     this.state = {
+//       numberToGuess: getRandomNumber(),
+//       numberOfGuesses: 0,
+//       latestGuess: 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,
+//     });
+//   }
+
+//   handleReset() {
+//     this.setState({
+//       numberToGuess: getRandomNumber(),
+//       numberOfGuesses: 0,
+//       latestGuess: null,
+//     });
+//   }
+
+//   render() {
+//     const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess;
+
+//     const isGameOver =
+//       isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS;
+
+//     return (
+//       <div>
+//         <h2>I'm thinking of a number from 1 to 100.</h2>
+//         <h2>
+//           Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
+//         </h2>
+//         <GuessControl onGuess={this.handleGuess} />
+//         {isGameOver && (
+//           <GameOver hasWon={isCorrectGuess} onReset={this.handleReset} />
+//         )}
+//         {!isGameOver && (
+//           <GuessMessage
+//             guess={this.state.latestGuess}
+//             numberToGuess={this.state.numberToGuess}
+//             numberOfGuesses={this.state.numberOfGuesses}
+//           />
+//         )}
+//       </div>
+//     );
+//   }
+// }
 
-export default NumberGuessingGame;
+export default NumberGuessingGame;
\ No newline at end of file