CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
NJAS
NJAS

Reputation: 73

Having an issue getting vaues to onClickHandler Due to MUI

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?

Upvotes: 0

Views: 31

Answers (1)

Steve G
Steve G

Reputation: 13442

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

Upvotes: 1

Related Questions