276

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 => { 
    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; 
6
  • 1
    Can you share your component code?
    – Sachin
    Commented Apr 25, 2019 at 10:20
  • 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;
    – Bishnu
    Commented Apr 25, 2019 at 10:38
  • 7
    it's a hell to read such shared code, respect others Commented Jun 23, 2019 at 7:00
  • 6
    I had the same problem too from Maximilian React course.
    – GDG612
    Commented May 1, 2020 at 10:38
  • 1
    The component name & its export name should be App Replace 1. const app --> const App 2. export default app --> export default App; Commented Jun 6, 2020 at 16:17

36 Answers 36

639

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.

5
  • 49
    This is some hard to find bug in an app, I think another comment should be added to the error message to point out this posibility.
    – Mark E
    Commented May 24, 2019 at 4:40
  • 26
    The reason for this being that in the Rules of Hooks ESLint plugin, there is a check to see if a component or function name is valid: Checks if the node is a React component name. React component names must always start with a non-lowercase letter..
    – HGomez
    Commented Jul 17, 2019 at 22:11
  • 16
    capitalizing A in App works for me... but not i am thinking why max did not get this error in udemy course ? Commented Sep 8, 2019 at 7:54
  • 11
    Same question " why max did not get any error ? I changed " app" to "App" and now it worked for me!
    – Forhad
    Commented Sep 17, 2019 at 4:04
  • Thanks, The naming was the issue which I was not checking. Commented Nov 30, 2022 at 5:07
87

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.

3
  • 6
    Yep I think that makes 3 of us doing the same course. Why is it it's case sensitive?
    – MeltingDog
    Commented Jul 26, 2019 at 1:39
  • 2
    This should be marked as correct answer. By default, "main component" name MUST be capitalized. Also remember to import your components with capitalized names. WRONG: import compo from './Compo'; RIGHT: import Compo from './Compo'; As react recognizes capitalized JSX tags as react components .
    – Marcos R
    Commented May 29, 2020 at 11:12
  • 1
    why is it case senstive tho?
    – Kipruto
    Commented Jul 2, 2020 at 14:19
58

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.

1
  • Thanks for saving my time. Commented Jul 3, 2020 at 20:48
40

Use first letter capital in the function name.

function App(){}
2
  • 1
    "First of all, you need to uppercase the FirstLetter of your components, in your case app should be App and person should be Person." Someone already wrote it...
    – Pochmurnik
    Commented Sep 26, 2019 at 7:11
  • 1
    This has been answered and this should be marked as the answer. Simple solution explained right. Commented Jul 14, 2020 at 12:32
25

React components (both functional as well as class) must begin with a capital letter. Like

const App=(props)=><div>Hey</div>

class App extends React.Component{
   render(){
     return <div>Hey</div>
   }
}

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 "use" prefix and must be in a camelCase

2
  • Yep worked for me for the react-complete-guide project
    – Bob Small
    Commented Nov 9, 2020 at 2:44
  • This solved my problem, thanks. The issue was that the function name is starting with small latter Commented Jan 25, 2021 at 1:45
20

Use const App instead of const app

0
16

Just try to capitalize your App name

const App = props => {...}

export default App;
2
  • do you mean document title?
    – msahin
    Commented Jan 22, 2020 at 18:16
  • Its Working, Thanks Commented Feb 5, 2020 at 5:59
13

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:

const Helper =()=>{}

function Helper2(){}

12

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.

12

the First character of your function should be an Uppercase

1
  • Wow, I always forget that. Thanks :)
    – Dženis H.
    Commented May 18, 2020 at 15:51
11

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

1
  • 3
    Your question doesn't seem like an answer. After reach 50 rep you will be able to comment on questions. If you answer is an answer, try improving it. Why components should start with capital letters, for example? Also, other answers have already said that, are you giving anything new?
    – Ender Look
    Commented Jul 7, 2019 at 18:56
9

function name must start with a capital letter

For ex:

const App = props => {

}

not const app

7

Do you have the right import ?

import React, { useState } from 'react';
0
6

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

6

your code

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;

change it by making the function name capital, like this

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;

it will work Thank you.

4

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.

4

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 <Foo /> expression, Foo must be in scope.

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

3

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

1
  • Welcome to StackOverflow (Upvoted). please put some code and answer to the questions. Commented Aug 24, 2019 at 22:14
3

Replace this

export default app;

with this

export default App;
3

Make function name capital. This works for me.

export default function App() { }
3
React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

For the following error , capitalize the component first letter like, and also the export also.

const App  = props => {
...}
export default App;
3

User-Defined Components Must Be Capitalized. In your case you have used const app = props => { }. In "app", 'a' is in lower case, you must try out it to use 'App'

  1. When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
  2. React recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

For more details you can check Official Document Click Here

1
  • This is the answer Commented Jun 15, 2023 at 21:34
2

Capitalize the app to App will surely work.

2

Try to change 'app' name to 'App'

const App = props => {   
  ...
};  
export default App;`
1

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 = () => {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.

1

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(<App />, rootElement);

For more info, you should read Rule of Hooks - React

Hope this helps!

1

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.

1

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 => {
  const [personState, setPersonState] = useState({
    persons : [
          {name: 'a', age: '1'},
          {name: 'b', age: '2'},
          {name: 'c', age: '3'}
    ]
  });

    return (
      <div>
     <Person name = {personState.persons[0].name} age={personState.persons[0].age}> First </Person>
     <Person name = {personState.persons[1].name} age={personState.persons[1].age}> Second </Person>
     <Person name = {personState.persons[2].name} age={personState.persons[2].age}> Third </Person>    
    );
};
export default App;

Person.js

import React from 'react';

const person = (props) => {
return (
        <div>
<p> My name is {props.name} and my age is {props.age}</p>
<p> My name is {props.name} and my age is {props.age} and {props.children}</p>
<p>{props.children}</p>
        </div>
)
};

[ReactHooks] [useState] [ReactJs]

0

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.

0
        import React, { useState } from "react"

    const inputTextValue = ({ initialValue }) => {
        const [value, setValue] = useState(initialValue);
        return {
            value,
            onChange: (e) => { setValue(e.target.value) }
        };
    };

    export default () => {
        const textValue = inputTextValue("");
        return (<>
            <input {...textValue} />
        </>
        );
    }

/*"Solution I Tired Changed Name of Funtion in Captial "*/

    import React, { useState } from "react"

const InputTextValue = ({ initialValue }) => {
    const [value, setValue] = useState(initialValue);
    return {
        value,
        onChange: (e) => { setValue(e.target.value) }
    };
};

export default () => {
    const textValue = InputTextValue("");
    return (<>
        <input {...textValue} />
    </>
    );
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.