Dropdown not opening since I changed to component class and removed hooks

Question

I am trying to implement a role based access menu into my React app and have used a NavBar from Material UI. I had it working previously but since I removed the hooks when I changed it to a class component I can't get it isn't displaying correctly and I can't get the drop down to work.

I also have a problem as there is a 'user' json in my Redux and for some reason the componentDidMount isn't picking it up for me to pull the userRole number to display the correct options for a particular role.

Console error messages

Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Menu)`, but its value is `null`
Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Popover)`, but its value is `null`.
Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(SimpleBackdrop)`, but its value is `null`.
Warning: Failed prop type: The prop `open` is marked as required in `Unstable_TrapFocus`, but its value is `null`.
Warning: Failed prop type: Material-UI: You are providing an onClick event listener to a child of a button element.
Firefox will never trigger the event.

scubaNavBar.component.js


    class ScubaNavbar extends Component {
    
      constructor(props) {
    
        super(props);
    
        this.logOut = this.logOut.bind(this);
    
        this.state = {
          showUserLevelAccess: false,
          showSchoolLevelAccess: false,
          showAdminLevelAccess: false,
          user: undefined,
          anchorEl: null,
          mobileMoreAnchorEl: null,
          isMenuOpen: null,
          isMobileMenuOpen: null,
        };
    
        history.listen((location) => {
          props.dispatch(clearMessage());
        });
      }
    
      componentDidMount() {
    
        const user = this.props.user;
        if (user) {
          this.setState({
            currentUser: user,
            showUserLevelAccess: user.userRoles === 1,
            showSchoolLevelAccess: user.userRoles === 2,
            showSiteAdminLevelAccess: user.userRoles === 3,
          });
        }
      }
    
      logOut() {
        this.props.dispatch(logout());
      }
    
      render() {
    
        const {
          // current user gives specific user details
          currentUser,
          // levels give role access
          showUserLevelAccess,
          showSchoolLevelAccess,
          showSiteAdminLevelAccess,
        } = this.state;
    
        const { classes } = this.props;
    
        **const handleProfileMenuOpen =() => {
           this.setState({anchorEl: this.currentTarget, open: Boolean(this.currentTarget)});
        };
        const handleMenuClose = () => {
          this.setState({anchorEl: this.currentTarget === null});
        };
        const handleMobileMenuOpen = () => {
          this.setState({mobileMoreAnchorEl: this.currentTarget, open: Boolean(this.currentTarget)});
        };
        const handleMobileMenuClose = () => {
          this.setState({mobileMoreAnchorEl: this.currentTarget === null});
        };**
    
        const menuId = 'dark-search-account-menu';
    
        const renderMenu = (
    
            <Menu
                anchorEl={this.state.anchorEl}
                anchorOrigin={{vertical: 'top', horizontal: 'right'}}
                id={menuId}
                keepMounted
                transformOrigin={{vertical: 'top', horizontal: 'right'}}
                open={this.state.isMenuOpen}
                onClose={handleMenuClose}>

score 1 · Answer 1 · answered Feb 28 '21 at 14:43

1

According to the doc, the value that open prop receive should be a boolean. So,just assign isMenuOpen: false in your state and it'll work fine.

answered Feb 28 '21 at 14:43

alisasani

2,808
1
7
15

score 0 · Answer 2 · answered Feb 28 '21 at 15:06

You can read the console messages which pretty much says it all. it says your are missing open prop as boolean which is responsible whether to show your dropdown or not.


    <Menu
      nchorEl={this.state.anchorEl}
      anchorOrigin={{vertical: 'top', horizontal: 'right'}}
      id={menuId}
      keepMounted
      transformOrigin={{vertical: 'top', horizontal: 'right'}}
      open={this.state.isMenuOpen} // initially you are setting this null on your constructor change it to false.
      onClose={handleMenuClose}>
    ```
And second warning says you are attaching event to a children of a button. Move that onclick handler to your button or your menu list item.

Dropdown not opening since I changed to component class and removed hooks

2 Answers2