Why is onClick being called on render?

Question

import React, { Component } from 'react';

class Bookmark extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props.idt);
  };

  render() {
    return (
      <div className='bookmark' onClick={this.handleClick()}/>
    );
  }
}
export default Bookmark;

This is my code. I've binded the function but it is still called on render. This is also how they do it in the React docs: https://facebook.github.io/react/docs/handling-events.html

It only works if I do it this way:

<div className='bookmark' onClick={() => this.handleClick()}/>

Then handleClick is called only when I click the button.

This will work as well.<div className='bookmark' onClick={this.handleClick}/> — Ved
– Ved, Commented May 17, 2017 at 10:10

Murat Karagöz · Accepted Answer · 2017-05-17 10:10:53Z

8

Because you are passing a method call instead of the method itself.

Change it to

<div className='bookmark' onClick={this.handleClick}/>

answered May 17, 2017 at 10:10

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

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

2 Comments

Isa Kurehpaz Over a year ago

Thanks. Didnt even notice the ().

Jiwa Chhetri Over a year ago

I am new to JS, so my question is: Why does the method call still get called? The onClick has not been triggered so the method call should not be called, correct?

Collectives™ on Stack Overflow

Why is onClick being called on render?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related