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

by

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

More Related Contents:

  1. Programmatically Navigate using react-router
  2. Why do we need middleware for async flow in Redux?
  3. When to use ES6 class based React components vs. functional ES6 React components?
  4. React Context vs React Redux, when should I use each one? [closed]
  5. Await is a reserved word error inside async function
  6. How to update single value inside specific array item in redux
  7. Why use Redux over Facebook Flux? [closed]
  8. Is this the correct way to delete an item using redux?
  9. React: how to load and render external html file?
  10. Is store.dispatch in Redux synchronous or asynchronous
  11. Updating nested data in redux store
  12. Cleaner/shorter way to update nested state in Redux?
  13. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  14. redux fetch body is not use with no cors mode
  15. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  16. How to sync Redux state and url hash tag params
  17. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  18. How to trigger off callback after updating state in Redux?
  19. Changing the layout of a component depending on Redux state
  20. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  21. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  22. Programmatically change Redux-Form Field value
  23. having multiple instance of same reusable redux react components on the same page/route
  24. Global state in React Native
  25. Update single value in item array | react redux
  26. How can I dispatch function in redux?
  27. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  28. Component won’t update when a redux state change occurs
  29. React-Redux: Should all component states be kept in Redux Store
  30. Could not find “store” in either the context or props of “Connect(App)”

Leave a Comment