React Onclick Function Fires on Render

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.

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

Why does the onClick function not fire directly on this component?

Can someone please explain the reason for this behavior

It sounds like Burger does not look for and use its onClick prop. Eg:

const Burger = () => {
    return <div>Burger</div>;
};

ReactDOM.render(<Burger onClick={() => console.log('click')} />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

React onClick function only fires once upon rendering to DOM

You need to pass onClick a function. The value you passed - alert(item) - is not a function, it's just an invocation of alert.

Instead, you want:

onClick={function () { alert(item); }}

Or if you're using ES6:

onClick={() => alert(item)}

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

Onclick function not defined after appending in React

myFunction is scoped to the module, but the onclick attribute is evaluated outside of that scope.

Don't use DOM to inject HTML into your div.

Instead, put your data in the React State, and read from the state when generating your JSX.

You'll need to move the call to apiCall inside a useEffect hook to stop recursive re-renders.

There's a React + Ajax tutorial on the React website (although it uses a class component rather than a function component) which covers this.

How to render component onClick in React after passing props?

i think this is because you are trying to map over "props", while you should be mapping over "props.tweets"
try this :

const LatestTweetsComponent = props => {
  return (
    <div>
      {props.tweets.map((tweet, index) => {
        return <p key={index}>{tweet}</p>
      })}
    </div>
  )
}

React onClick event trigger infinitely on render

So if you do this:

<button onClick={this.login}>test</button>

You are passing a reference to the function login on click of the button.

But if you do this:

<button onClick={this.login()}>test</button>

Then you are executing the function as soon as this element is rendered.

The login function triggers a state change:

login = () => {
  this.setState({ authed: true })
  alert(this.state.authed)
}

And since state change triggers another render, therefore it goes into the infinite loop.

Had you not called the setState in login, it would not go into the infinite loop.

Only your function will execute without even clicking the button on render.

---

Related Topics