Adding onclick to UI material button

Question

I am trying to add an onClick eventhandler into a material ui and sometimes it is called, sometimes it is not. However, it's working fine with regular buttons

 handleClick = (event) => {
    const value = event.target.value;
    console.log(value);
    this.setState({ filtered: this.state.videos.filter(item => { 
            return item.category === value
        })
    })

<Button value="java" onClick={this.handleClick}  color="primary">Java</Button> 
<Button value="React" onClick={this.handleClick} color="primary">React</Button> 
<Button value="C#" onClick={this.handleClick}  color="primary">C#</Button> 
<Button value="javascript" onClick={this.handleClick} color="primary">JavaScript</Button>

when I updated to console.log to get event.target, I got the result shown in the image below I found the issue, but still don't know how yo fix it. React adds two spans to the Button that have no attribute name, so when I click the button, the function gets called, but not when I click the span

Your code is ok. I did not find any issue. Can you please share your full code so that I can reproduce on my side. — Khabir
– Khabir, Commented May 19, 2020 at 17:49

CD.. · Accepted Answer · 2020-05-19 18:52:01Z

6

You can use event.currentTarget.value instead of event.target.value.

Material-ui's Button has a nested span inside the button, so when you use event.target.value and the user clicks the span you get the span as event.target, if you'd use event.currentTarget you'd get the element that the event listener is attached to - the button.

See a working example: https://codesandbox.io/s/cocky-cookies-s5moo?file=/src/App.js

edited May 19, 2020 at 18:52

answered May 19, 2020 at 18:44

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zocatelli Over a year ago

Yo bro, next time you close questions, make sure to try the code before hand.

CD.. Over a year ago

@Zocatelli, sorry, If you still need help lets chat at chat.stackoverflow.com/rooms/17/javascript

Saamer · Accepted Answer · 2020-05-19 19:23:07Z

2

Inside your handle click, you could also do:

return (item.category === value || item.category === event.target.innerHTML)

But obviously CD..’s answer is better

answered May 19, 2020 at 19:23

Saamer

5,1591 gold badge18 silver badges74 bronze badges

Comments

corasla · Accepted Answer · 2021-02-03 08:21:11Z

Besides relying on currentTarget, you can always curry the parameter to the callback function (imagine you are not passing in static content, but maybe the index of an iteration or some dynamic values stored in an object, etc)

Example

handleClick = (value) => () => {
    console.log(value);
    this.setState({ filtered: this.state.videos.filter(item => { 
            return item.category === value
        })
    })

<Button value="java" onClick={this.handleClick('java')}  color="primary">Java</Button> 
<Button value="React" onClick={this.handleClick('React')} color="primary">React</Button> 
<Button value="C#" onClick={this.handleClick('C#')}  color="primary">C#</Button> 
<Button value="javascript" onClick={this.handleClick('javascript')} color="primary">JavaScript</Button>

Collectives™ on Stack Overflow

Adding onclick to UI material button

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related