Deviopath › React

Restart a Game with key

Hard · State

Build a restartable number guessing game. Goal: reset all state of a child component by changing its key.

Game shows <p className="range">Guess a number from 1 to 10</p> (1 to 100 on "hard"), <input className="guess">, a "Guess" button, <p className="attempts">Attempts: 0</p> and, after a guess, <p className="feedback"> with "Too low", "Too high" or "Correct!". Only whole numbers count. After "Correct!" the input and button are disabled and App gets the attempts.

App shows <h2>Game #1</h2>, <select className="level"> (easy, hard), "New game", the game and <ol className="history"> of finished games, e.g. <li>Game 1 (easy): 3 attempts</li> ("1 attempt" for one). "New game" and a level change start the next game number with a fresh Game; the history stays. The secret is secretFor(level, game).

Next: Tic-Tac-Toe