React Project NavBar

Whenever I try to use this component it gives error as => Invalid hook call. Hooks can only be called inside of the body of a function component.
How to resolve this ?

import React, { useState } from 'react';
import { AppBar, Toolbar, Typography, Button, IconButton, Menu, MenuItem } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';

const CustomNavbar = () => {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleMenuOpen = (event) => {

  const handleMenuClose = () => {

  return (
    <AppBar position="static">
        <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} onClick={handleMenuOpen}>
          <MenuIcon />
            'aria-labelledby': 'basic-button',
          <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
          <MenuItem onClick={handleMenuClose}>My account</MenuItem>
          <MenuItem onClick={handleMenuClose}>Logout</MenuItem>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          My App
        <Button color="inherit">Login</Button>

export default CustomNavbar;

I don’t see that error with the code you posted.

How are you using the component? Do you have a repo with all the code you can link to?

No repo yet , this is my first project .

How are you using the component?

1 Like

I am using it with Material UI

That doesn’t really tell us anything we need to see how you are using it.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.