ERROR in MenuDrop

[Wanhenri]

Error found in the menudrop component

[Wanhenri]

I can't find the solution

<div>
        {menusimple.map((simple) => (
            <ButtonSimple key={simple.id} content={simple.name} />
        ))}
        {menudropdown.map((drop) => (
        <>
          <Button key={drop.id} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
              {drop.name}
          </Button>                
          <Menu            
              id="simple-menu"
              anchorEl={anchorEl}
              keepMounted
              open={Boolean(anchorEl)}
              onClose={handleClose}
          >            
              <MenuItem  onClick={handleClose}>{drop.add}</MenuItem>   
              <MenuItem  onClick={handleClose}>{drop.search}</MenuItem>
              <MenuItem  onClick={handleClose}>{drop.delet}</MenuItem>           
          </Menu>
        </>
        ))} 
    </div>

[Wanhenri]

I tried to develop it that way but the mistake was in the hooks. I preferred to refactor and do the header differently.

    <div>
        {menusimple.map((simple) => (
            <ButtonSimple key={simple.id} content={simple.name} />
        ))}
          <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
              Product
          </Button>                
          <Menu            
              id="simple-menu"
              anchorEl={anchorEl}
              keepMounted
              open={Boolean(anchorEl)}
              onClose={handleClose}
          >            
              <MenuItem  onClick={handleClose}>Add New Product</MenuItem>   
              <MenuItem  onClick={handleClose}>Seach Product</MenuItem>
              <MenuItem  onClick={handleClose}>Delete product</MenuItem>           
          </Menu>
          <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
              Vendor
          </Button>                
          <Menu            
              id="simple-menu"
              anchorEl={anchorEl}
              keepMounted
              open={Boolean(anchorEl)}
              onClose={handleClose}
          >            
              <MenuItem  onClick={handleClose}>Add New Vendor</MenuItem>   
              <MenuItem  onClick={handleClose}>Seach Vendor</MenuItem>
              <MenuItem  onClick={handleClose}>Delete Vendor</MenuItem>           
          </Menu>
    </div>

[Wanhenri]

I decided to do it in a simple way:

    <div>
        {menusimple.map((simple) => (
            <ButtonSimple key={simple.id} content={simple.name} />
        ))}
          <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
              Add
          </Button>                
          <Menu            
              id="simple-menu"
              anchorEl={anchorEl}
              keepMounted
              open={Boolean(anchorEl)}
              onClose={handleClose}
          >            
              <MenuItem  onClick={handleClose}>Product</MenuItem>   
              <MenuItem  onClick={handleClose}>Vendor</MenuItem>          
          </Menu>
    </div>