How to get a React component in a function by onClick

Question

I need to get a component that I cliked and see its target property. I try to get it but the evt param is undefined

  getcomponent(evt){

  console.log(evt.target)
  //...

  }

//...

  render() {

      return (<button id="btn" onClick={() =>this.getcomponent()}></button>);
  }

Harsh Makadia · Accepted Answer · 2018-03-20 15:25:48Z

2

You need to pass event in order to get it back. Here is the code.

class TestJS extends React.Component {
    constructor(props) {
        super(props);
        this.getcomponent = this.getcomponent.bind(this);
    }

    getcomponent(event){
        console.log(event.target);
    }
    render() {
        return(
            <div id="root">
                <button id="btn" onClick={(event) =>this.getcomponent(event)}></button>;
            </div>

        )};
    }
export default TestJS;

answered Mar 20, 2018 at 15:25

Harsh Makadia

3,4436 gold badges36 silver badges43 bronze badges

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

Comments

Tomasz Bubała · Accepted Answer · 2018-03-20 15:24:38Z

1

You didn't pass the event to function call. Pass the event like this: onClick={(evt) => this.getcomponent(evt)}.

answered Mar 20, 2018 at 15:24

Tomasz Bubała

2,1731 gold badge13 silver badges18 bronze badges

Comments

DevK · Accepted Answer · 2018-03-20 15:23:47Z

1

Add event as a parameter to the onClick:

render() {
    return (<button id="btn" onClick={(event) =>this.getcomponent(event)}></button>);
}

answered Mar 20, 2018 at 15:23

DevK

10k2 gold badges33 silver badges51 bronze badges

Comments

sultan · Accepted Answer · 2018-03-20 15:25:40Z

1

Make code short and simple:

onClick = event => {
  console.log(event.target)
}
render() {
  return <button id="btn" onClick={this.onClick}></button>
}

answered Mar 20, 2018 at 15:25

sultan

4,7292 gold badges28 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to get a React component in a function by onClick

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related