How to create Menu Item Component in ReactJS ?

Last Updated : 25 Jul, 2024

React JS is a popular JavaScript library used for building user interfaces. It provides a component-based architecture that allows developers to create reusable UI elements. Material UI for React has this component available for us and it is very easy to integrate. We can use Menu Component in ReactJS using the following approach.

Prerequisites:

Approach to create Menu Component:

Component Setup:
- App.js uses Material-UI components to create a simple menu UI in React.
- State is managed using the useState hook, to track the anchor element for menu positioning.
Event Handling:
- Two functions, handleClick and handleClose, are defined to manage the opening and closing of the menu.
- handleClick sets the anchor element based on the click event, and handleClose resets the anchor element to null, closing the menu.
Rendering and Interaction:
- The component renders a button labeled “Open Menu List,” and clicking this button opens the menu.
- The menu contains some items such as “My Account,” “Settings,” “Profile,” and “Logout.” Selecting an item calls the handleClose function, closing the menu.

Steps for Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@emotion/react": "^11.13.0",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^5.16.4",
    "@mui/material": "^5.16.4",
    "react": "^18.2.0",
  },

Example: Now write down the following code in the App.js file.

import React from "react";
import MenuItem from "@mui/material/MenuItem";
import Button from "@mui/material/Button";
import Menu from "@mui/material/Menu";

const App = () => {
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleClose = () => {
        setAnchorEl(null);
    };

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    return (
        <div
            style={{
                marginLeft: "40%",
            }}>
            <h2>How to use Menu Component in ReactJS?</h2>
            <Button
                aria-controls="simple-menu"
                aria-haspopup="true"
                onClick={handleClick}>
                Open Menu List
            </Button>
            <Menu
                keepMounted
                anchorEl={anchorEl}
                onClose={handleClose}
                open={Boolean(anchorEl)}>
                <MenuItem onClick={handleClose}>
                    My Account
                </MenuItem>
                <MenuItem onClick={handleClose}>
                    Settings
                </MenuItem>
                <MenuItem onClick={handleClose}>
                    Profile
                </MenuItem>
                <MenuItem onClick={handleClose}>
                    Logout
                </MenuItem>
            </Menu>
        </div>
    );
};

export default App;