React code create dynamic menu navigation

Here is an example of how you might use React to create a dynamic navigation menu:

First, you would need to create a component that represents the menu. You might call this component "NavMenu". Inside the component, you would define the structure and styling for the menu, as well as the logic for rendering the different menu items.

import React from 'react';

const NavMenu = ({ menuItems }) => {
  return (
    <nav>
      <ul>
        {menuItems.map((item) => (
          <li key={item.id}>
            <a href={item.link}>{item.label}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default NavMenu;

In this example, the menuItems prop is passed to the component and it expects an array of menu items. Each item should have an "id" , "label" and "link" properties. These properties will be used to generate the structure of the menu.

Now you can use this component in other parts of your application and pass the menuItems prop with the desired data for rendering.

import NavMenu from './NavMenu';

const menuItems = [
  { id: 1, label: 'Home', link: '/' },
  { id: 2, label: 'About', link: '/about' },
  { id: 3, label: 'Contact', link: '/contact' },
];

const App = () => {
  return (
    <div>
      <NavMenu menuItems={menuItems} />
    </div>
  );
};

This is a basic example, in a real-world application, you might want to add more features such as active state handling, sub-menus, and more, but this example should give you a good starting point for building a dynamic navigation menu with React.