Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

How do I turn off onClick event in React?

Use the disabled prop to disable a button in React, e.g. <button disabled={true}>Click</button> . You can use the prop to conditionally disable the button based on the value of an input field or another variable or to prevent multiple clicks to the button. Copied!

What would be the common mistake of function being called every time the component renders?

What would be the common mistake of function being called every time the component renders? You need to make sure that function is not being called while passing the function as a parameter. // Wrong: handleClick is called instead of passed as a reference! // Correct: handleClick is passed as a reference!

How do you call onClick in Reactjs?

The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app. Event names are written in camelCase, so the onclick event is written as onClick in a React app. In addition, React event handlers appear inside curly braces.

What triggers React re render?

React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.


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 
  }
}

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.


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.


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.


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>
                       
                       )}