CODEWITHSUNDEEP
javascriptreactjsjsx
LayTexas
LayTexas

Reputation: 645

how to use useState in an html tag?

I need to link my state to an HTML tag. I managed to do this using class, but now using hooks I am not getting it. an error is appearing.

React Hook "useState" is called in function "navbar" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks.

Code:

  export default function navbar() {

    const [isOpen, setIsOpen] = useState(false);

    const handleClick = () => {
      setIsOpen(!isOpen)
    }

    return (
      <nav>
        <div className="logoBtn">

          <div className="logo">
            <a href="#"><h1>Logo</h1></a>
          </div>

          <div className="btn" onClick={handleClick}>
            <div className="bar"></div>
            <div className="bar"></div>
            <div className="bar"></div>
          </div>

        </div>

        <ul className={isOpen ? 'showNav' : und}>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

      </nav>
    );
  }

Upvotes: 0

Views: 5392

Answers (1)

keikai
keikai

Reputation: 15146

You need an uppercase first letter for a component name.

That's the reason for the error you currently have.

export default function Navbar() {

Upvotes: 1

Related Questions