React Hook useState is called in function app which is neither a React function component or a custom React Hook function

Question

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-hooks      Line 39     state  is not defined   no-undef      Search 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   gt         const  personState  setPersonSate    useState   person    name  bishnu  age  32     name  rasmi  age  27     name  fretbox  age  4               return            lt div className  App  gt                lt h2 gt This is react lt  h2 gt                lt Person name  personState person 1  name  age  27  gt  lt  Person gt               lt Person name  personState person 2  name  age  4  gt  lt  Person gt            lt  div gt                 export default app    Person component  import React from  react     const person   props   gt         return            lt div gt               lt h3 gt i am  props name  lt  h3 gt               lt p gt i am  props age  years old lt  p gt               lt p gt  props children  lt  p gt           lt  div gt             export default person

User · Answer

The solution is simple  correct  app  and write  App  with the first character in uppercase

User · Answer

Do not use arrow function to create functional components   Do as one of the examples below   function MyComponent props      const  states  setStates    React useState   value            return        lt input       type  text        value  states value        onChange   event    gt  setStates   value  event target value           gt           Or    IMPORTANT  Repeat the function name  const MyComponent   function MyComponent props       const  states  setStates    React useState   value            return        lt input       type  text        value  states value        onChange   event    gt  setStates   value  event target value           gt            If you have problems with  ref   probably in loops   the solution is to use forwardRef        IMPORTANT  Repeat the function name    Add the  ref  argument to the function  in case you need to use it   const MyComponent   React forwardRef  function MyComponent props  ref      const  states  setStates    React useState   value            return        lt input       type  text        value  states value        onChange   event    gt  setStates   value  event target value           gt

User · Answer

I had the same issue  turns out that Capitalizing the  A  in  App  was the issue  Also  if you do export  export default App  make sure you export the same name  App  as well

User · Answer

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

User · Answer

Components should start with capital letters  Also remember to change the first letter in the line to export

User · Answer

the First character of your function should be an Uppercase

User · Answer

The solution  as Yuki already pointed  is to capitalize the component name  It s important to note that not only the  default  App component needs to be capitalized  but all components   const Person        gt   return        export default Person    This is due to eslint-plugin-react-hooks package  specifically isComponentName   function inside RulesOfHooks js script   Official explanation from Hooks FAQs      We provide an ESLint plugin that enforces rules of Hooks to avoid bugs  It assumes that any function starting with    use    and a capital letter right after it is a Hook  We recognize this heuristic isn   t perfect and there may be some false positives  but without an ecosystem-wide convention there is just no way to make Hooks work well     and longer names will discourage people from either adopting Hooks or following the convention

User · Answer

import React    useState   from  react       const inputTextValue      initialValue      gt            const  value  setValue    useState initialValue           return               value              onChange   e    gt    setValue e target value                           export default      gt            const textValue   inputTextValue              return   lt  gt               lt input     textValue    gt           lt   gt                       Solution I Tired Changed Name of Funtion in Captial          import React    useState   from  react   const InputTextValue      initialValue      gt        const  value  setValue    useState initialValue       return           value          onChange   e    gt    setValue e target value               export default      gt        const textValue   InputTextValue          return   lt  gt           lt input     textValue    gt       lt   gt

User · Answer

In the app function you have incorrectly spelled the word setpersonSate  missing the letter t  thus it should be setpersonState   Error   const app   props   gt         const  personState  setPersonSate    useState         Solution   const app   props   gt             const  personState  setPersonState    useState

User · Answer

Use const App instead of const app

User · Answer

Just try to capitalize your App name   const App   props   gt         export default App

User · Answer

React Hook  quot useState quot  is called in function  quot App quot  which is neither a React function component or a custom React Hook function quot   For the following error   capitalize the component first letter like  and also the export also  const App    props   gt         export default App

User · Answer

If you are still looking for answer of this question all above stated solution work fine but still i will provide the running correct code below  edited  import React    useState   from  react   import    App css   import Person from    Person Person     const App   props   gt        const  personsState  setPersonsState     useState         persons            name   Ram   age  20            name   Rahul   age  24            name   Ramesh   age  25                 otherState   Some Other value                const switchNameHandler        gt            console log  Click is working            Dont Do THIS  this state persons 0  name    singh         setPersonsState           persons            name   Ram  age  20            name   Raj   age  24            name   yts   age  30                               return          lt div className  quot App quot  gt           lt h1 gt Nice two one three  Hello i am a noob react developer lt  h1 gt           lt button onClick  switchNameHandler  gt Switch Name lt  button gt           lt Person name  personsState persons 0  name  age  personsState persons 0  age    gt           lt Person name  personsState persons 1  name  age  personsState persons 1  age  gt  My hobbies are Gaming lt  Person gt           lt Person name  personsState persons 2  name  age  personsState persons 2  age    gt         lt  div gt                 return React createElement  div   className  App    React createElement  h1   null   Hi learning the basics of react        export default App

User · Answer

Make function name capital  This works for me   export default function App

User · Answer

May be you have added the useEffect that depends on the condition before the one with no condition EX  useEffect      gt       anyFunction                 useEffect     gt      anyCode         response

User · Answer

React components names should be capitalized and custom hooks functions should start with the use keyword to identify as a react hook function   So  capitalize your app components to App

User · Answer

Use Capital letter for defining functional component name  React hooks custom components   const  app  should be const  App     App js  import React    useState   from  react   import   Component   from  react   import logo from    logo svg   import    App css   import Person from    Person Person    const App   props   gt      const  personState  setPersonState    useState       persons                name   a   age   1               name   b   age   2               name   c   age   3                    return          lt div gt        lt Person name    personState persons 0  name  age  personState persons 0  age  gt  First  lt  Person gt        lt Person name    personState persons 1  name  age  personState persons 1  age  gt  Second  lt  Person gt        lt Person name    personState persons 2  name  age  personState persons 2  age  gt  Third  lt  Person gt                export default App    Person js  import React from  react    const person    props    gt    return            lt div gt   lt p gt  My name is  props name  and my age is  props age  lt  p gt   lt p gt  My name is  props name  and my age is  props age  and  props children  lt  p gt   lt p gt  props children  lt  p gt           lt  div gt          ReactHooks   useState   ReactJs

User · Answer

Do you have the right import    import React    useState   from  react

User · Answer

Capitalize the app to App will surely work

User · Answer

Try to capitalize  app  like const App   props   gt         export default App   In React  components need to be capitalized  and custom hooks need to start with use

User · Answer

Use first letter capital in the function name  function App

User · Answer

Step-1  Change the file name src App js to src app js  Step-2  Click on  Yes  for  Update imports for app js    Step-3  Restart the server again

User · Answer

Whenever working with a React functional component  always keep the first letter of the name of the component in Uppercase in order to avoid these React Hooks errors    In your case  you have named the component app  which should be changed to App  as I said above  to avoid the React Hook error

User · Answer

First of all  you need to uppercase the FirstLetter of your components  in your case app should be App and person should be Person   I tried to copy your code in the hope of finding the issue  Since you did not share how you call the App component  I can only see 1 way to result this to an issue   This is the link in CodeSandbox  Invalid hook call   Why  Because of the code below which is wrong   ReactDOM render App    rootElement     It should have been   ReactDOM render  lt App   gt   rootElement     For more info  you should read Rule of Hooks - React  Hope this helps

User · Answer

React components  both functional as well as class  must begin with a capital letter  Like const App  props   gt  lt div gt Hey lt  div gt   class App extends React Component     render         return  lt div gt Hey lt  div gt          React identifies user-defined components by following this semantic  React s JSX transpiles to React createElement function which returns an object representation of the dom node  The type property of this object tells whether it is a user-defined component or a dom element like div  Therefore it is important to follow this semantics Since useState hook can only be used inside the functional component or a custom hook  this is the reason why you are getting the error because react is not able to identify it as a user-defined component in the first place  useState can also be used inside the custom hooks which is used for the reusability and the abstraction of logic  So according to the rules of hooks  the name of a custom hook must begin with a  quot use quot  prefix and must be in a camelCase

User · Answer

Replace this   export default app    with this  export default App

User · Answer

In JSX  the lower-case tag name is considered as html native component  In order to react recognise the function as React component  need to Capitalized the name    Capitalized types indicate that the JSX tag is referring to a React component  These tags get compiled into a direct reference to the named variable  so if you use the JSX  lt Foo   gt  expression  Foo must be in scope    https   reactjs org docs jsx-in-depth html html-tags-vs -react-components

User · Answer

I had the same issue  but not with the App  I had a custom class but used a lowercase letter to start the function name and also received the error   Changed the first letter of the function name and the export line to CamelCase and error gone   in my case the end result was something like   function Document            export default Document    this solved my problem

User · Answer

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

User · Answer

You are getting this error   React Hook  useState  is called in function  App  which is neither a React function component or a custom React Hook function   Solution  You basically need to Capitalize the function   For example    x000D   x000D  const Helper      gt    x000D   x000D  function Helper2     x000D   x000D   x000D

[reactjs] React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function

Examples related to reactjs

Examples related to react-hooks