Why value from a Material-UI Button is not being passed to the onClick event handler?

Question

I am trying to pass a value from a Material-UI Button when it's clicked to it's click handler, but it's always showing value of undefined . Earlier when I was using a simple button, I was getting value but not after.

const categoryChangedHandler = (e) => {
        console.log("category choosed ========= " + e.target.value);
        setCategory(e.target.value);

    };

<Button className="CategoryButton" variant="outlined" color="primary"
                                value={category}
                                onClick={e => categoryChangedHandler(e)}
                                style={{ textAlign: 'center' }}
                            >
                                {category}
                            </Button>

and I am getting the result:

category choosed ========= undefined

Answer 1

You need to use event.currentTarget.value instead of event.target.value .

The text of a Material-UI Button is within a <span> inside a <button> element. When you click on the text, event.target will refer to the span element; whereas event.currentTarget will refer to the element with the event handler attached (ie the button element) that the click event bubbled up to.

Here's a simple working example:

import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <Button value="hello" onClick={(e) => console.log(e.currentTarget.value)}>
      Hello World
    </Button>
  );
}

Related answer:

• Props not being passed down to Material UI button text

Documentation:

• https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget