I’m trying to make a wordle game for my class assignment. As part of this, I have created a use state called activeWord. This word is updated and changed when users click buttons. Following that, they can submit their guess. I am trying to save this guess in an array, then go onto the next row and start typing again.

However, what I’ve found is that submitting the guess a second time overwrites the array, and I’m not sure why. I have a feeling it’s related to rerendering when the use state changes.

    const [activeWord, setActiveWord] = useState("") // If somebody be typing, this is where it'll go
    
    function enter() {
        guessStorage.push(activeWord)
        console.log(guessStorage)
        if (row <= 5) {
            setActiveWord("")
            setLetter(0)
            setRow(row + 1)
        }
        else {
            alert("You have made six guesses. The game is now over.")
        }
    }

Relevant code above. The entire project can be found below.
Game.jsx

import { act, useEffect, useState } from "react"
import { useNavigate, useParams } from "react-router-dom"
import Wordbank from "../Components/Wordbank"
import '../src/App.css'
import '../src/Game.css'
import Row from "../Components/Row"

function Game() {
    function getNewWord() { // Fetches from wordbank.
        const wordBank = Wordbank()
        return (wordBank)
    }

    function type(input) { // Types a character

        if (row <= 5) {
            if (letter <= 4) {
                setActiveWord(activeWord + input)
                setLetter(letter + 1)
            }
            else {
                alert("You ahve already typed 5 letters. Hit delete to change your answer")
            }
        }
        else {
            alert("You have already made six guesses. The game is over.")
        }
        console.log(activeWord)
    }

    function backspace() {
        console.log(letter)
        if (row <= 5) {
            if (letter != 0) {
                setLetter(letter - 1)
                setActiveWord(activeWord.substring(0, activeWord.length - 1))
                setLastPressed("delete")
            }
        }
        else {
            alert("You have already made six guesses. The game is over.")
        }
    }

    function enter() {
        guessStorage.push(activeWord)
        console.log(guessStorage)
        if (row <= 5) {
            setActiveWord("")
            setLetter(0)
            setRow(row + 1)
        }
        else {
            alert("You have made six guesses. The game is now over.")
        }
    }
    const navigate = useNavigate()

    const [word, setWord] = useState(getNewWord()[0]), [def, setDef] = useState()
    const [row, setRow] = useState(0), [letter, setLetter] = useState(0)
    let guess = []  // When someone enters a guess, it goes here.
    const [activeWord, setActiveWord] = useState("") // If somebody be typing, this is where it'll go
    const [lastPressed, setLastPressed] = useState(false) // this may be deprecated
    return (
        <>
            <button onClick={() => { // Summons a new word.
                let newWord = getNewWord()
                newWord[0] = newWord[0].toUpperCase()
                setWord(newWord[0])
                setDef(newWord[1])
            }}>Current word: {word.toUpperCase()}</button>

            <div className="wordleTable padding-big"> {/*Wordle Table*/}
                <div className="row">
                    {row != 0 ? <Row word={guess[0]} answer={word} key={letter.id} /> : <Row word={activeWord} key={letter.id} />} {/*Wordle row. Starts empty, fills on guess.*/}
                </div>
                <div className="row">
                    {row != 1 ? <Row word={guess[1]} key={letter.id} /> : <Row word={activeWord} key={letter.id} />}
                </div>
                {/* <div className="row">
                    {row != 2 ? <Row word={guess[2]} key={letter.id} /> : <Row word={activeWord} key={letter.id} />}
                </div>
                <div className="row">
                    {row != 3 ? <Row word={guess[3]} key={letter.id} /> : <Row word={activeWord} key={letter.id} />}
                </div>
                <div className="row">
                    {row != 4 ? <Row word={guess[4]} key={letter.id} /> : <Row word={activeWord} key={letter.id} />}
                </div>
                <div className="row">
                    {row != 5 ? <Row word={guess[5]} key={letter.id} /> : <Row word={activeWord} key={letter.id} />}
                </div> */}
            </div>
            <br></br>
            <br></br>
            <button onClick={() => setWord("FIRES")}>Set word to "Fires"</button>
            <br></br>
            <div className="keyboard padding-big">
                <div className="key-row"> {/*keyboard!*/}
                    <button onClick={() => type("A")}>A</button>
                    <button onClick={() => type("B")}>B</button>
                    <button onClick={() => type("C")}>C</button>
                    <button onClick={() => type("D")}>D</button>
                    <button onClick={() => type("E")}>E</button>
                    <button onClick={() => type("F")}>F</button>
                    <button onClick={() => type("G")}>G</button>
                    <button onClick={() => type("H")}>H</button>
                    <button onClick={() => type("I")}>I</button>
                    <button onClick={() => type("J")}>J</button>
                </div>
                <br></br>
                <div className="key-row">
                    <button onClick={() => type("K")}>K</button>
                    <button onClick={() => type("L")}>L</button>
                    <button onClick={() => type("M")}>M</button>
                    <button onClick={() => type("N")}>N</button>
                    <button onClick={() => type("O")}>O</button>
                    <button onClick={() => type("P")}>P</button>
                    <button onClick={() => type("Q")}>Q</button>
                    <button onClick={() => type("R")}>R</button>
                    <button onClick={() => type("S")}>S</button>
                </div>
                <br></br>
                <div className="key-row">
                    <button onClick={() => enter()}>Ent</button>
                    <button onClick={() => type("T")}>T</button>
                    <button onClick={() => type("U")}>U</button>
                    <button onClick={() => type("V")}>V</button>
                    <button onClick={() => type("W")}>W</button>
                    <button onClick={() => type("X")}>X</button>
                    <button onClick={() => type("Y")}>Y</button>
                    <button onClick={() => type("Z")}>Z</button>
                    <button onClick={() => backspace()}>Del</button>
                </div>
                <button onClick={() => { console.log(row, letter) }}> row letter</button>
            </div>
        </>
    )
}
export default Game

Row.jsx

import { useState } from "react"
// ON THIS PAGE, WE'RE TRYING TO FACT CHECK
function Row(props) {
    let wordInput = props.word // To refer to props.word more quickly
    let wordAnswer = props.answer // To refer to the answer more quickly.
    //   worderAnswer = wordAnswer.map() // Turns a string into a map.
    var color = "" // To color the answer correctly
    console.log(wordInput)

    let wordLength = wordInput.length // To add blank space where necessary.
    if (wordInput != "") {
        for (let i = 0; i < 5 - wordLength; i++) {
            wordInput += " "
        }
    } // Adds blank space so the grid starts out complete.
    wordLength = wordInput.length
    // Ensures that the word length is correct
    if (wordInput != "") {
        return (
            <div className="rowBox"> { /*styling*/}
                {/*If the word is valid*/} {wordLength == 5 ? wordInput.split('').map((letter, index) => {
                    {/*split the word into an array and map it*/ }
                    // if (!(wordAnswer.has(letter))) {
                    //     {/*!!!ACTION REQUIRED!!!*/ }
                    //     {/*Color the boxes appropriately*/ }
                    //     {/*!!!ACTION REQUIRED!!!*/ }
                    // }
                    return (<><button key={index} className={`${color} letterBox`}>{letter.toUpperCase()}</button></>)
                }) // The final return
                    // IF this guess has not been made yet, return a blank row.
                    : wordInput.map((letter, index) => (<button key={index} className={`letterBox`}>{wordAnswer}</button>))}
            </div>
        )
    }
    else {
        return (<>
            <button className="letterBox"> </button>
            <button className="letterBox"> </button>
            <button className="letterBox"> </button>
            <button className="letterBox"> </button>
            <button className="letterBox"> </button>
        </>
        )
    }
}

export default Row