Closed Wanhenri closed 4 years ago
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>
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>
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>
Error found in the menudrop component