CODEWITHSUNDEEP
reactjsreact-hooks
jalker
jalker

Reputation: 15

React Hook "useState" is called in function "nav" that is neither a React function component nor a custom React Hook function

import {useState} from 'react'

const nav = () => {
  const [activeNav, setActiveNav] = useState('#')
}

I was trying to build a nav bar. and I am getting this error I don't know why

React Hook "useState" is called in function "nav" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Upvotes: 1

Views: 2528

Answers (2)

Ngwasiri Onga
Ngwasiri Onga

Reputation: 1

OK here is what you can do, rename the nav function to Nav and it's export default nav to export default Nav at the end of the function this should solve your problem and stop your errors and build your website

Upvotes: -1

Drew Reese
Drew Reese

Reputation: 202628

Basically it seems like one or both of the following is the cause of your issue:

  1. nav is not a valid React component. React components are capitalized.
  2. nav might not be rendered as a React component.

Rename to Nav so it's at least named correctly.

import {useState} from 'react'

const Nav = () => {
  const [activeNav, setActiveNav] = useState('#');

  ...

  return (
    // return valid JSX
  );
}

Render Nav as a React component:

  • Valid

     <Nav />

  • Invalid

     {Nav()}

Upvotes: 2

Related Questions