I am trying to implement onclick into navbar items so when i click one of the items in nav bar, it will load some component.

below is the list for the navbar:

class Navbar extends React.Component {

  render () {

    const menuItems = [
      {
        title: 'Home',
        url: '/',
      },
      {
        title: 'Assets',
        url: '/Assets',
      },
      {
        title: 'Service Report',
        url: '/Servicereport',
      },
      {
        title: 'Change Request',
        url: '/Changerequest',
      },
      {
        title: 'Logout',
        url: '/logout',
      }
    ];

    return (
      <nav>

        <ul className="menus">

          {menuItems.map((menu, index) => {
            return (

            <MenuItems
              items={menu}
              key={index}
            />
            );
          })}

        </ul>

      </nav>
    );
  };
}

export default Navbar;

How can i implement? If need more information, please let me know. thank you.

I am trying to implement onclick into navbar items

CodePudding user response：

You can try the onClick event in React and call a function to redirect to the specified location using useNavigate hook of React Router. You first need to install react router DOM.

npm i react-router-dom

Try the below code for redirecting

import { useNavigate } from "react-router-dom";

class Navbar extends React.Component {

  render () {

    const menuItems = [
      {
        title: 'Home',
        url: '/',
      },
      {
        title: 'Assets',
        url: '/Assets',
      },
      {
        title: 'Service Report',
        url: '/Servicereport',
      },
      {
        title: 'Change Request',
        url: '/Changerequest',
      },
      {
        title: 'Logout',
        url: '/logout',
      }
    ];

    const navigate = useNavigate();


    return (
      <nav>

        <ul className="menus">

          {menuItems.map((menu, index) => {
            return (

            <MenuItems
              onClick = {() => navigate(`${menu.url}`)}
              items={menu}
              key={index}
            />
            );
          })}

        </ul>

      </nav>
    );
  };
}

export default Navbar;

CodePudding user response：

You just have to add an onclick attributes to your MenuItems.

class Navbar extends React.Component {

  const handleOnClick = (e) => {
    if(e.currentTarget == "Something") {
      // Do something
    } else {
      // Do something else
    }
    
  }

  render () {

    const menuItems = [
      {
        title: 'Home',
        url: '/',
      },
      {
        title: 'Assets',
        url: '/Assets',
      },
      {
        title: 'Service Report',
        url: '/Servicereport',
      },
      {
        title: 'Change Request',
        url: '/Changerequest',
      },
      {
        title: 'Logout',
        url: '/logout',
      }
    ];

    return (
      <nav>

        <ul className="menus">

          {menuItems.map((menu, index) => {
            return (

            <MenuItems
              items={menu}
              key={index}
              onClick={handleOnClick}
            />
            );
          })}

        </ul>

      </nav>
    );
  };
}

export default Navbar;

CodePudding user response：

<MenuItems onClick={() => {…}} {…this.props} /> attach onClick handler as a prop. Is MenuItems defined? I would change the name to MenuItem.