30 Days Of JavaScript

Day 30: React

Lesson 4: Inputs

Let's change our game to a number guessing game. We will choose a random number between 1 and 4 and give the user an input field to guess a number.

Delete Result.jsx and change your App.js code to this:

1import React, { useState } from "react";
2import "./style.css";
3
4const randomNumber = (max) => {
5  return Math.floor(Math.random() * max) + 1;
6};
7
8export default function App() {
9  const [numberToGuess, setNumberToGuess] = useState(randomNumber(4));
10  const [score, setScore] = useState(0);
11  const [guess, setGuess] = useState(0);
12
13  const onHandleChange = (e) => {
14    // more code 1
15  };
16
17  const onHandleClick = () => {
18    // more code 2
19  };
20
21  return (
22    <div>
23      <input type="text" onChange={(e) => onHandleChange(e)} />
24      <button onClick={onHandleClick}>Guess (1 - 4)</button>
25      <div>Score: {score}</div>
26    </div>
27  );
28}

So we set up 3 pieces of state, numberToGuess, score and guess. We have a small function that creates a random number from 1 to max called randomNumber().

We have an input field with an onChange handler that calls handleOnChange and passes along the event. We also have a button to make a guess that has an onClick handler that calls onHandleClick.

We then show the score.

When the user types into the text box the onChange handler is called on every change. So we can use this to set our guess.

Add this in place of // more code 1.

1setGuess(+e.target.value);

This casts the value to a number with the + operator and uses setGuess to set the value of guess.

Now replace // more code 2 with:

1console.log(numberToGuess, guess);
2
3if (numberToGuess === guess) {
4  setScore(score + 1);
5}
6
7setNumberToGuess(randomNumber(4));

This checks if the guess matches the numberToGuess, if it does it changes score and then sets numberToGuess by calling setNumberToGuess with a new call to randomNumber.

Your final code in App.js should look like this:

1import React, { useState } from "react";
2import "./style.css";
3
4const randomNumber = (max) => {
5  return Math.floor(Math.random() * max) + 1;
6};
7
8export default function App() {
9  const [numberToGuess, setNumberToGuess] = useState(randomNumber(4));
10  const [score, setScore] = useState(0);
11  const [guess, setGuess] = useState(0);
12
13  const onHandleChange = (e) => {
14    setGuess(+e.target.value);
15  };
16
17  const onHandleClick = () => {
18    console.log(numberToGuess, guess);
19
20    if (numberToGuess === guess) {
21      setScore(score + 1);
22    }
23
24    setNumberToGuess(randomNumber(4));
25  };
26
27  return (
28    <div>
29      <input type="text" onChange={(e) => onHandleChange(e)} />
30      <button onClick={onHandleClick}>Guess (1 - 4)</button>
31      <div>Score: {score}</div>
32    </div>
33  );
34}

30 Days Of JavaScript

Day 30: React

Lesson 4: Inputs

Outline

Go Pro?