react hooks must be called in a react function - how do I change syntax to correct?-CodePudding

this is my first react project and I am trying to create a function based component for a menu bar. When I try to access useNavigate() I get an error "react hooks must be called in a react function."

how do I change the current code I have to use the line

const navigate = useNavigate();

below is my function

    export const MenuBar = () => (
  <div>
    <Typography variant="h5">Ninja Notes</Typography>
    <Typography variant="h3">{testItem}</Typography>
  </div>
);

then further more, on another page I am trying to use

import { MenuBar } from "./MenuBar";

CodePudding user response：

You should put the useNavigate inside the component that uses it.

If you want to use it inside the MenuBar try

  export const MenuBar = () => {
    const navigate = useNavigate(); // but no need to use the hook if you do not use the navigate variable inside the component.
    return (
      <div>
        <Typography variant="h5">Ninja Notes</Typography>
        <Typography variant="h3">{testItem}</Typography>
      </div>
    );
  }