Error: Maximum update depth exceeded. setState throws error

user_9653879 0
Viewed 38
export class ABC extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      abc: null
    };
  }

  renderOptions() {
      this.setState({
        abc: abcArray.length !== 0
      });
    return;
  }

  renderRadio() {
    return (
          <Field
            id="abc"
            name="abc"
            values={this.renderOptions()}
          />
    );
  }

  render() {
    return (
      <div>
               {this.renderRadio()}

      </div>
    );
  }
}


export default connect(mapStateToProps)(ABC);

I am trying to setState in renderOptions() which gives me the below error.

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

can't get my head around what im doing wrong here.

any help is appreciated.

setstate reactjs javascript
2 Answers

Your render method is calling setState, which will trigger render to be called again.

You should not call setState inside of renderOptions.

user_58085040

in renderRadio() -> values={this.renderOptions()} you are calling the renderOptions function. that function calls the this.setState({abc: abcArray.length !== 0});. then react will try to rerender the component. this will create a loop. to avoid it, you should change values prop to this values={this.renderOptions}

I've refactor your code.

export class ABC extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      abc: null
    };
  }

  renderOptions() {
      this.setState({
        abc: abcArray.length !== 0
      });
    return;
  }

  renderRadio() {
    return (
          <Field
            id="abc"
            name="abc"
            values={this.renderOptions}
          />
    );
  }

  render() {
    return (
      <div>
               {this.renderRadio()}

      </div>
    );
  }
}


export default connect(mapStateToProps)(ABC);
user_150846450
Related