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

Question

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

I am trying to refactor the following code from my render view:

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange.bind(this,false)} >Retour</Button>

to a version where the bind is within the constructor. The reason for that is that bind in the render view will give me performance issues, especially on low end mobile phones.

I have created the following code, but I am constantly getting the following errors (lots of them). It looks like the app gets in a loop:

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

Below is the code I use:

var React = require('react');

var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');

var Button = require('react-bootstrap/lib/Button');

var Form = require('react-bootstrap/lib/Form');

var FormGroup = require('react-bootstrap/lib/FormGroup');

var Well = require('react-bootstrap/lib/Well');



export default class Search extends React.Component {



    constructor() {

        super();



        this.state = {

            singleJourney: false

        };



        this.handleButtonChange = this.handleButtonChange.bind(this);

    }



    handleButtonChange(value) {

        this.setState({

            singleJourney: value

        });

    }



    render() {



        return (

            <Form>



                <Well style={wellStyle}>



                    <FormGroup className="text-center">



                        <ButtonGroup>

                            <Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange(false)} >Retour</Button>

                            <Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChange(true)} >Single Journey</Button>

                        </ButtonGroup>

                    </FormGroup>



                </Well>



            </Form>

        );

    }

}



module.exports = Search;

setstate constructor reactjs

4 years ago by Bharatgxwzm

2 Answers

Login / Signup to Answer the Question.

Login Signup

**espadacoder11** · Answer 1 · 2021-08-03T12:16:59

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>

**sandhya6gczb** · Answer 2 · 2021-08-04T13:15:49

If you are trying to add arguments to a handler in recompose, make sure that you're defining your arguments correctly in the handler. It is essentially a curried function, so you want to be sure to require the correct number of arguments. This page has a good example of using arguments with handlers.

Example (from the link):



withHandlers({

  handleClick: props => (value1, value2) => event => {

    console.log(event)

    alert(value1 + ' was clicked!')

    props.doSomething(value2)

  },

})

for your child HOC and in the parent



class MyComponent extends Component {

  static propTypes = {

    handleClick: PropTypes.func, 

  }

  render () {

    const {handleClick} = this.props

    return (

      <div onClick={handleClick(value1, value2)} />

    )

  }

}

this avoids writing an anonymous function out of your handler to patch fix the problem with not

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

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

2 Answers

Login / Signup to Answer the Question.