-1
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>
</>
);
};
setProjects([ ...project, 'Novo projeto ${Date.now()}' ]);
Voce placed...project
, I believe it should be...projects
.– Cmte Cardeal
I always recommend using a lint, like the
eslint-config-pagarme-base
oreslint-airbnb
. They avoid these undeclared variable problems and other types of problems.– Allan Ramos