0
123
ViewsButton's onclick records the i tag instead of the button itself
I have a button and I want to capture its 'id' when it is clicked.
<button id={props.id}
onClick={props.handleClick}
className="btn btn-circle" >
<i class="fas fa-angle-down"></i>
</button >
When I log the event console.log(event.target.id); in my handleClick function, it returns the i tag's 'id' (which is just an empty string) if I click in the middle of the button. If I click on the sides of the button, then my handleClick function works as intended.
This is what the button looks like for reference
How should I fix this? I suppose I can add the same 'id' attribute to the i tag, but was wondering if there was a better fix.
·
Juan Pablo Isaza
2 answers
Answer question0
You could use currentTarget instead:
console.log(event.currentTarget.id);
This will return the currentTarget that you have attached your onClick function on, not the target that triggers the event.
·
Juan Pablo Isaza
Report
0
you also can use this way to get id value
import { render } from "react-dom";
import React, { Component } from "react";
import "./styles.css";
class Click extends Component {
constructor(props) {
super(props);
}
click(e) {
let id = e.target.attributes.getNamedItem("id").value;
alert(id);
}
render() {
return (
<button onClick={this.click} id="This is id">
Click Here
</button>
);
}
}
export default Click;
·
Juan Pablo Isaza
Report
Answer question