By clicking the button I get a message from "Referenceerror"

Question

Context

I created an application that displays a listing made from the variable - it’s in the application state - projects along with a button "Add button".

By clicking on it I’m getting the message App.js:37 Uncaught ReferenceError: project is not defined.

Below I will put the error message received and then the code of my application.

Error message

App.js:37 Uncaught ReferenceError: project is not defined
    at handleAddProject (App.js:37)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at eval (react-dom.development.js:8508)

Uncaught ReferenceError: project is not defined
    at handleAddProject (App.js:37)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at eval (react-dom.development.js:8508)

Application code

import React, {useState} from 'react';
import Header from './components/Header';


function App() {
    const [projects, setProjects] = useState(['Desenvolvimento de app', 'Front-end web']);
    

    function handleAddProject() {
        setProjects([ ...project, `Novo projeto ${Date.now()}` ]);
        console.log(projects);
    };

    return (
        <>
            <Header title="Projects" />

            <ul>
                {projects.map(project => <li key={project}>{project}</li>)}
            </ul>

            <button type="button" onClick={handleAddProject}>Botão Adicionar</button>

        </>
    );
};

Error print

Answer 1

This error indicates that the reference project is not defined, this can occur when trying to call a reference that has not yet been declared in the program, or when some typing error occurred.

You are declaring a state variable called "Projects" and not "project", did you not get confused at the time of typing? Specifically in the excerpt:

function handleAddProject() {
        setProjects([ ...project, `Novo projeto ${Date.now()}` ]);
        console.log(projects);
    };