ReactJS: Warning: setState(…): Cannot update during an existing state transition

by

Looks like you’re accidentally calling the handleButtonChange method in your render method, you probably want to do onClick={() => this.handleButtonChange(false)} instead.

If you don’t want to create a lambda in the onClick handler, I think you’ll need to have two bound methods, one for each parameter.

In the constructor:

this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true);
this.handleButtonChangeSingle = this.handleButtonChange.bind(this, false);

And in the render method:

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChangeSingle} >Retour</Button>
<Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChangeRetour}>Single Journey</Button>

More Related Contents:

  1. When to use React setState callback
  2. React setState not Updating Immediately
  3. TypeError: evt.target is null in functional setState
  4. What is the difference between using constructor vs getInitialState in React / React Native?
  5. How to fix missing dependency warning when using useEffect React Hook
  6. Dynamically import images from a directory using webpack
  7. How to pass params with history.push/Link/Redirect in react-router v4?
  8. How to get history on react-router v4?
  9. How to pass params into link using React router v6?
  10. Detect Route Change with react-router
  11. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  12. Warning: Each child in a list should have a unique “key” prop
  13. Typescript image import
  14. React Child Component Not Updating After Parent State Change
  15. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  16. Set types on useState React Hook with TypeScript
  17. How to create helper file full of functions in react native?
  18. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  19. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  20. Recommended approach for route-based tests within routes of react-router
  21. NextJs CORS issue
  22. Difference in the navigation (React Router v6)
  23. Class extends React.Component can’t use getInitialState in React
  24. React Hooks – Modified state not reflecting immediately
  25. react router v6 No routes matched location
  26. How do I type this ‘as’ JSX attribute in TypeScript?
  27. require is not defined
  28. React: Show loading spinner while images load
  29. import a module from node_modules with babel but failed
  30. Media queries in Material UI components

Leave a Comment