Why is my onClick being called on render? - React.js

Question

I have a component that I have created:

class Create extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    var playlistDOM = this.renderPlaylists(this.props.playlists);
    return (
      <div>
        {playlistDOM}
      </div>
    )
  }

  activatePlaylist(playlistId) {
    debugger;
  }

  renderPlaylists(playlists) {
    return playlists.map(playlist => {
      return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div>
    });
  }
}

function mapStateToProps(state) {
  return {
    playlists: state.playlists
  }
}

export default connect(mapStateToProps)(Create);

When I render this page, activatePlaylist is called for each playlist in my map. If I bind activatePlaylist like:

activatePlaylist.bind(this, playlist.playlist_id)

I can also use an anonymous function:

onClick={() => this.activatePlaylist(playlist.playlist_id)}

then it works as expected. Why does this happen?

Oleksandr T. · Accepted Answer · 2017-11-10 11:51:01Z

269

You need pass to onClick reference to function, when you do like this activatePlaylist( .. ) you call function and pass to onClick value that returned from activatePlaylist. You can use one of these three options:

1. using .bind

activatePlaylist.bind(this, playlist.playlist_id)

2. using arrow function

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

3. or return function from activatePlaylist

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}

edited Nov 10, 2017 at 11:51

answered Dec 11, 2015 at 14:48

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

9 Comments

jhamm Over a year ago

I don't remember it working in previous versions of React this way. Am I remembering wrong or has the api changed?

Oleksandr T. Over a year ago

@jhamm You are using ES6 classes and in this case you should bind context manually.

Rafa Romero Over a year ago

@AlexanderT. there is one thing that I don't get it. If you bind the context with .bind, as you say in step 1, it's necessary to do step 2? and if it is, why? Because I think that when you use arrow function, the context is the one that it is where the function was defined, but if we are attaching the context using .bind, the context is already attached, right?

Oleksandr T. Over a year ago

@Rafa Romero it is just three different options, you can use one of them

zenoh Over a year ago

There's now a section on the official React Docs website answered this question in full depth: reactjs.org/docs/faq-functions.html

|

CAMD_3441 · Accepted Answer · 2019-03-31 22:08:46Z

22

I know this post is a few years old already, but just to reference the latest React tutorial/documentation about this common mistake (I made it too) from https://reactjs.org/tutorial/tutorial.html:

Note

To save typing and avoid the confusing behavior of this, we will use the arrow function syntax for event handlers here and further below:

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>
       {this.props.value}
     </button>
   );
 }
}

Notice how with onClick={() => alert('click')}, we’re passing a function as the onClick prop. React will only call this function after a click. Forgetting () => and writing onClick={alert('click')} is a common mistake, and would fire the alert every time the component re-renders.

answered Mar 31, 2019 at 22:08

CAMD_3441

3,3024 gold badges30 silver badges44 bronze badges

1 Comment

Jeff Bluemel Over a year ago

I had an arrow function in front of it like this, and it was still activating.

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

This behaviour was documented when React announced the release of class based components.

https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

Autobinding

React.createClass has a built-in magic feature that bound all methods to this automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.

Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 13, 2015 at 22:58

David L. Walsh

24.9k10 gold badges63 silver badges50 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

The way you passing the method this.activatePlaylist(playlist.playlist_id), will call the method immediately. You should pass the reference of the method to the onClick event. Follow one of the below-mentioned implementation to resolve your problem.

1.

onClick={this.activatePlaylist.bind(this,playlist.playlist_id)}

Here bind property is used to create a reference of the this.activatePlaylist method by passing this context and argument playlist.playlist_id

2.

onClick={ (event) => { this.activatePlaylist.(playlist.playlist_id)}}

This will attach a function to the onClick event which will get triggered on user click action only. When this code exectues the this.activatePlaylist method will be called.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 8, 2019 at 6:03

Shrishail Uttagi

4361 gold badge7 silver badges8 bronze badges

Comments

priya verma · Accepted Answer · 2021-06-30 08:01:08Z

3

import React from 'react';
import { Page ,Navbar, Popup} from 'framework7-react';

class AssignmentDashboard extends React.Component {
    constructor(props) {
      super(props);
      this.state = {

    }

    
      onSelectList=(ProjectId)=>{
          return(

            console.log(ProjectId,"projectid")
          )

      }
            
render() {
       
    return (   
      
 <li key={index} onClick={()=> this.onSelectList(item.ProjectId)}></li>
                       
                       )}

edited Jun 30, 2021 at 8:01

answered Jun 30, 2021 at 7:54

priya verma

412 bronze badges

1 Comment

wayneOS Over a year ago

Could you add a little bit of explanation instead of just posting bits of code? It would really improve the quality of your answer

Collectives™ on Stack Overflow

Why is my onClick being called on render? - React.js

5 Answers 5

9 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related