Reactjs pass html element on onclick

Question

I'm new to React and I'm trying to pass the HTML element from an onClick event, but I'm not getting the expected result.

Here is the code:

import React, { Component } from 'react';

export class Header extends Component{
  isScrolledIntoView (e){
     console.log('html element is ',e)
   }

    render(){
       return(
            <div>
                <button onClick={this.isScrolledIntoView.()}>Click me</button>
            </div>
        );
     }
}

The desired output would be to get the button's HTML element in the console.

Inacio Schweller · Accepted Answer · 2017-06-15 20:23:27Z

3

You need to capture the target of the e (event) instead of the event itself, like this:

import React, { Component } from 'react';

export class Header extends Component {

  isScrolledIntoView (e) {
     console.log('html element is ', e.target)
  }

  render() {
       return (
            <div>
                <button onClick={this.isScrolledIntoView.bind(this)}>Click me</button>
            </div>
       );
  }

}

Here is a demo link: https://codesandbox.io/s/y8xXqopM7

Hope it helps!

edited Jun 15, 2017 at 20:23

answered Jun 15, 2017 at 20:18

Inacio Schweller

1,97613 silver badges22 bronze badges

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

5 Comments

jackysatpal Over a year ago

wow, it worked! Just curious what is 'e' here and e.target means?

Inacio Schweller Over a year ago

I did a demo link, also, just in case: codesandbox.io/s/y8xXqopM7

teobais Over a year ago

It returns the element that triggered the event.

Inacio Schweller Over a year ago

Whenever you have a HTML event, you have a event being capture on the page. The event object has a target property, which shows the targeted html element.

Inacio Schweller Over a year ago

@jackysatpal check this also: developer.mozilla.org/en-US/docs/Web/API/Event/target

cheesenthusiast · Accepted Answer · 2017-06-15 20:23:27Z

0

The method isScrolledIntoView() is bound to the class, not the component instance, so when you refer to this.isScrolledIntoView() in your render method it will return undefined. Regular React lifecycle methods are bound to the component instance, but for your own custom methods you need to do a little work, you can put it in the constructor:

constructor(props) {
    this.isScrolledIntoView = this.isScrolledIntoView.bind(this);
}

Or you can use class properties to auto-bind the method:

isScrolledIntoView = (e) => {
    // do stuff
}

answered Jun 15, 2017 at 20:23

cheesenthusiast

1397 bronze badges

Comments

Yuri Pereira · Accepted Answer · 2017-06-15 20:23:42Z

0

2 things you need to change in your code.

1- You have to bind your isScrolledIntoView, and it could be inside your constructor, or doin' this => <button onClick={this.isScrolledIntoView.bind(this)}>Click me</button>

2- You should target your e event instead of only log e you should
=> console.log('html element is ', e.target)

Nice reading for novices in react

answered Jun 15, 2017 at 20:23

Yuri Pereira

2,0051 gold badge20 silver badges25 bronze badges

Comments

PSA · Accepted Answer · 2023-02-23 07:15:09Z

0

Passing current element using ref

class Square extends React.Component {
    constructor(props) {
    super(props);
    
    this.state = {
      value: null,
    };
  }
  
  render() {
    return (
      <button className="square"
 onClick={function(ref) { console.info(" click : " + ref.target.innerHTML); }}>
        {this.props.value}
      </button>
    );
  }
}

Credits : https://stackoverflow.com/ about using "ref"

edited Feb 23, 2023 at 7:15

answered Feb 23, 2023 at 7:12

PSA

11 bronze badge

1 Comment

Borja Over a year ago

Code-only answers are considered low quality: make sure to provide an explanation what your code does and how it solves the problem. It will help the asker and future readers both if you can add more information in your post. See also Explaining entirely code-based answers: meta.stackexchange.com/questions/114762/…

Collectives™ on Stack Overflow

Reactjs pass html element on onclick

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related