6

I am trying to use React useState hook in my functional component but I am getting this error:

Failed to compile
./src/Person/Person.js
  Line 5:43:  React Hook "useState" is called in function "person" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

Here is the code for the same:

import React, {useState} from 'react';
import { tsPropertySignature, directive } from '@babel/types';

const person =props =>{
    const [initState,stateChangeFunction]=useState({name:'akie@123'})
return <p>I am from the {}</p>   
}
 export default person;

Thanks in advance.

Akshay Seth
  • 1,224
  • 1
  • 12
  • 11
  • Duplicate of https://stackoverflow.com/questions/55846641/react-hook-usestate-is-called-in-function-app-which-is-neither-a-react-funct – bakar_dev Nov 22 '19 at 07:48
  • If you use `useState` your function name should start with capital letter, if there is no `useState` then capital/small letter both will work – tareq aziz Nov 22 '19 at 08:02
  • Does this answer your question? [React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function](https://stackoverflow.com/questions/55846641/react-hook-usestate-is-called-in-function-app-which-is-neither-a-react-funct) – Jurrian Nov 22 '19 at 08:30

2 Answers2

12

Your Component name should be capitalise it should look like this :-

const Person = () => {
 // .......
 }

 export default Person;
Ronak07
  • 894
  • 5
  • 26
12
  • React recognize capitalized function name as a react function component, in your case

function Person () {}

  • Furthermore, React only recognize function name starting with 'use' as a custom hook, like

function usePeople() {}

  • Hooks ONLY available in a function component or a custom hook
Caper
  • 186
  • 6