How to open and close menu by event 'onMouseOver&onMouseLeave' in React JS Material ui

Kumar — Thu, 28 Sep 2023 11:54:20 +0000

I'm beginner to react JS and I want to show a drop-down list of items whenever a user hovers on the button without having to click on the button for this I have tried this below code but it is not working fine.

I have referred this example and here showing only onMouseOver event but I want to use onMouseOver&onMouseLeave this two events when use Over and Leave the button.

Suggest me where I did the mistake and how to achieve this.


import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Fade from '@mui/material/Fade';
import { Container,Link } from '@mui/material';


function FadeMenu() {

const [anchorEl, setAnchorEl] = React.useState(null);
const [open, setOpen] = React.useState(false);

    const handleOver = (event) => {
        setAnchorEl(event.currentTarget);
setOpen(true);
    }

    const handleLeave = (event) => {

        setAnchorEl(null);
        setOpen(false);
    }

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

 return (

<Button
                id="about-fade-button"
                aria-controls="about-fade-menu"
                aria-haspopup="true"
                aria-expanded={open ? 'about-fade-menu' : 'false'}
                onMouseOver={handleOver}
                onMouseLeave={handleLeave}
                sx={{cursor:"pointer",textTransform:"none",fontSize:"14px",
                '&:hover':{color:"#30B54B",textDecoration:"underline",
            textDecorationThickness:"2px"},}}
            >
                About
            </Button>
            <Menu
                id="about-fade-menu"
                MenuListProps={{
                    'aria-labelledby': 'about-fade-button',
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                TransitionComponent={Fade}
            >
                <MenuItem onClick={handleClose}>1</MenuItem>
                <MenuItem onClick={handleClose}>2</MenuItem>
                <MenuItem onClick={handleClose}>3</MenuItem>
            </Menu>



            <Button
                id="helpcenter-fade-button"
                aria-controls="helpcenter-fade-menu"
                aria-haspopup="true"
                aria-expanded={open ? 'helpcenter-fade-menu' : 'false'}
                onMouseOver={handleOver}
                onMouseLeave={handleLeave}
                sx={{cursor:"pointer",textTransform:"none",fontSize:"14px",
                '&:hover':{color:"#30B54B",textDecoration:"underline",textDecorationStyle:"solid",
            textDecorationThickness:"2px"},}}
            >
                Help Center
            </Button>
            <Menu
                id="helpcenter-fade-menu"
                MenuListProps={{
                    'aria-labelledby': 'helpcenter-fade-button',
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                TransitionComponent={Fade}
            >
                <MenuItem onClick={handleClose}>4</MenuItem>
                <MenuItem onClick={handleClose}>5</MenuItem>
                <MenuItem onClick={handleClose}>6</MenuItem>
            </Menu>

);

}

export default FadeMenu;

Getting axioserror network error at xmlhttprequest.handleerror when calling axios post request in react

Kumar — Thu, 28 Sep 2023 11:45:13 +0000

I am new to this React.js axios concept and when I try to call axios.get, I get AxiosError: Network Error I'm not sure why this error is coming and I have read this and this some other examples also but I didn't get the proper solution.

And I have install the below two commands

npm install axios and npm install cors

Below is my code :-


import React from "react";
import { Button } from "@mui/material";
import axios from "axios";

function GetApiData() {

var data = {
    vendorname: "achintya",
      };

      const postData = () => {
        axios({
          method: "post",
          baseURL: "https://somesite.com",
          url: "/bkdb_getvendorcodes",
          payload: data,
        })
          .then(function (response) {
            // handle success
            console.log(response);
          })
          .catch(function (error) {
            // handle error
            console.log(error);//showing error here 
          });
      };

    return (
        <>
            <Button variant="outlined" onClick={postData}>POST data</Button>
        </>
    );
}

export default GetApiData;

When I run the above code I'm getting the below error

But the service is working fine example img

I don't have much knowledge to fix this error please suggest me where I did the mistake and how to achieve this.

DEV Community: Kumar

How to open and close menu by event 'onMouseOver&onMouseLeave' in React JS Material ui

Getting axioserror network error at xmlhttprequest.handleerror when calling axios post request in react