Set onclick event on React list (Nav Bar) - reactjs

Question

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

Answer 1

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;

Answer 2

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;

Answer 3

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