React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function
I'm trying to use react hooks for a simple problem
const [personState,setPersonState] = useState({ DefinedObject });
with following dependencies.
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0"
}
but I'm still getting the following error:
./src/App.js
Line 7:
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooksLine 39:
'state' is not defined
no-undefSearch for the keywords to learn more about each error.
Component code is below:
import React, {useState} from 'react';
import './App.css';
import Person from './Person/Person';
const app = props => {
const [personState, setPersonSate] = useState({ person:[ {name:'bishnu',age:'32'}, {name:'rasmi',age:'27'}, {name:'fretbox',age:'4'} ], });
return (
<div className="App">
<h2>This is react</h2>
<Person name={personState.person[1].name} age="27"></Person>
<Person name={personState.person[2].name} age="4"></Person>
</div> );
};
export default app;
Person component
import React from 'react';
const person = props => {
return(
<div>
<h3>i am {props.name}</h3>
<p>i am {props.age} years old</p>
<p>{props.children}</p>
</div>
)
};
export default person;
Solution 1:
Try to capitalize 'app' like
const App = props => {...}
export default App;
In React, components need to be capitalized, and custom hooks need to start with use
.
Solution 2:
I feel like we are doing the same course in Udemy.
If so, just capitalize the
const app
To
const App
Do as well as for the
export default app
To
export default App
It works well for me.
Solution 3:
As far as I know a linter is included into the this package. And it requires you componend should begin from Capital character. Please check it.
However as for me it's sad.