I'm looking to create a category navigation menu that includes icons and labels. I attempted to do this using Chips:
{categories.map((category) => (
<Chip
key={category._id}
avatar={<Avatar alt={category.name} src={category.icon} />}
label={category.name}
variant="outlined"
onClick={(e) => handleClick(e)}
value={category._id}
/>
))}
I also tried using Tabs -> Tab components, but ran into issues with the "value" attribute not being produced when clicked.
const handleClick = (e) => {
const valueTargeting= e.target.value;
console.log(valueTargeting);
};
Is there a solution to make either of these methods work, or should I consider designing a custom button instead? Additionally, I noticed that they do output a "value" when clicked in a specific small area. Could this be a bug on my part?