Why Is My Onclick Being Called on Render? - React.Js

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

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

React onClick function fires on render

Because you are calling that function instead of passing the function to onClick, change that line to this:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=> called Arrow Function, which was introduced in ES6, and will be supported on React 0.13.3 or upper.

Why is onClick being called on render?

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

Change it to

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

ReactJS - button onClick gets called during render

It's because instead of passing the function to the event onClick, you're calling the function directly.

Try doing it this way:

<button onClick={() => { this.handleButton(60)}}>1min</button>
<button onClick={() => { this.handleButton(180)}}>3min</button>
<button onClick={() => { this.handleButton(300)}}>5min</button>

Found the answer here: React onClick function fires on render

Hope it helps!

onClick called on render

You need to pass your lambda like this:

<a style={{cursor: 'pointer'}} onClick={ () => this.login() }> Log In</a>

Note the parenthesis. As you have it now the function is automatically invoked when the script runs/your component renders.

It is also worth noting that using JSX lambdas can cause performance problems because it creates a new function on every render. You could do the following instead to prevent the new function generation.

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

  public function login(event) {
    // do something
  }

  render() {
    return(
      <a onClick={this.login}>Log In</a>
    );  
  }

}

React onClick event only triggers when rendering component

You have to add () => setDate(calendarDay) or it would automatically call the function whenever it renders the component.

<StyledCalendarBoxBody>
{calendarDays.map(calendarDay => <StyledDay onClick={() => setDate(calendarDay)} key={calendarDay.toString()}><span>{calendarDay.day.toString()}</span></StyledDay>)}

    
</StyledCalendarBoxBody>

Why my onclick getting called on each render in react js?

preventDefault should help:

onClick={e => {
  e.preventDefault();
  this.props.data.handleApiGrants(apis);
  this.setState({saveflag:true});
}}

React: onClick handler is getting called on every render?

onClick expects a function. An arrow function does not have its own this; the this value of the enclosing execution context is used.
Arrow function is a replacement for the following

onClick={this.handleClick.bind(this,i)}

It doesn't work when you run it like

onClick={this.handleClick(i)} 

because in this case it will call a function and that will pass a return value that will be evaluate everytime render is called. So if you are doing somethings in the onClick function that causes a rerender for instance setState you app will go in an endless loop. Thus onClick needs a function and not a value so unless you are returning a function from the onClick handler you should not directly call it.

Arrow function above performs the role of binding the parameter to the function

onClick event firing off after render in React

onClick={funx(1)} the code inside the brackets is evaluated at render, so you're actually calling the function. You want to pass a function reference. If you need to pass the 1 you could do:

 <MenuItem onClick={() => funx(1)} ...>

---

Related Topics