Attach element to arrow function

Question

I am using arrow functions to create an event on a button click, how do I attach an element to the function. Noob question.

  handleButtonClick(classId) {
    this.setState({
      classId
    });
  }

  render() {
    return (
      <Button
        name="name"
        value={classId}
        onClick={e => this.handleButtonClick(e, classId)}
      >'Click me'
      </Button>
    );
  }

Answer 1

Aside from changing

handleButtonClick(classId) {

to

handleButtonClick(e, classId) {

You can then access the element via the target property, ie e.target

Answer 2

Just change

handleButtonClick(classId) {

into

handleButtonClick(e, classId) {

since in onClick handler, you first passing e:

onClick={e => this.handleButtonClick(e, classId)}

Hope this helps

Answer 3

You just have to add event argument in your function and you can access the input value by using event.target.value

    handleButtonClick(event,classId) {
     this.setState({
     classId:event.target.value
     });
    }