So I want to get a category navigation which contains icons and labels. I've tried with 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}
/>
))}
Ive tried using Tabs -> Tab. But they don't produce a "value" when i
const handleClick = (e) => {
const valueTargeting= e.target.value;
console.log(valueTargeting);
};
Is there a way to use any of these, or do I have to resort to designing a button? Also notice they do output a "value" when clicked at a certain area(which is small surface area). Is that a bug on my part?
Chip is not returning the expected value is because the Chip does not explicitly maintain a value. In order for it to return a value to your event handler, you'll need to wrap the value that you want it to return in the onClick handler itself. For example:
{categories.map((category) => {
return (
<Chip
label={category.name}
// Notice 'category._id' being sent from the handler, not `e`
onClick={handleClick(category._id})}
/>
);
})}
Working MUI 4 Code Sandbox: https://codesandbox.io/s/chip-click-mui4-ggl0z?file=/demo.js:940-1325
Working MUI 5 Code Sandbox: https://codesandbox.io/s/chip-click-mui5-y5xkk?file=/demo.js