How to find out where the error is coming from in ReactJS?

Question

I am getting this error because I am accidentally calling some method in my render method. As my application code is really big I'm unable to find out where is this coming from.

When I click on the index.js link in the console it is taking me to the following code.

This is what I found after doing some debugging(call stack), But it's not the exact full component code, as there are too many lines of code in the component I'm just posting part of it here. Is there anything wrong with this code:

class Sample extends React.Component {
  constructor(props) {
    super(props);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      activeKey: '',
    };
  }
  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    if (this.state.activeKey === '') {
      activeKey = this.getDefaultKey();
      this.handleSelect(activeKey);
    }
    return (
      <PanelGroup
        accordion
        activeKey={this.state.activeKey}
        onSelect={this.handleSelect}
      >
        {optionList}
      </PanelGroup>
    );
  }
}

Scouting

I usually put a breakpoint there and then scroll through the stack trace in my browser until I find the source. – Polonaise

@Polonaise where should i put the breakpoint it looks like line 2178 is react library code. – Scouting

That's where I usually put it. In Chrome (not sure about other browsers) any breakpoint will give you access to the Call Stack and you can scroll through and interactively click into each file until you find the component causing your issue. – Polonaise

The error message in screen shot suggests that one of your component is setting state or props in render function. So try avoiding setState or set redux state from your render function or component update callbacks. you can also use componentDidCatch callback to log your error. reactjs.org/docs/react-component.html#componentdidcatch – Messy

@GurpreetSingh added some code can you please check if there is anything wrong – Scouting

@Polonaise added some code can you please check if there is anything wrong – Scouting

Answer 1

I would first use the react dev tools chrome extension first, you could also install the redux dev tools if you are using redux, both of these can find errors in state or props.

Most likely, though, there is an error in one of your components, and you should update your question with either snippets or a link to the codebase.

Minaret

its really a huge code base , can't copy paste the code and its a private repo so can't share the repo link , and i have react and redux dev tool extensions but not understanding how to debug this. – Scouting

If you are using git, I would try to go back to a point in the code where that error doesn't show up. Then, search for any place where you mutate code or a variable. This could be due to something as simple as using .splice() instead of .slice() – Minaret

i am using git but fixing the error in existing application – Scouting

added some code can you please check if there is anything wrong – Scouting

Answer 2

You're calling this.handleSelect in the render function, which calls setState. As the error says, you can't do this. Can't say for sure without seeing the whole component and knowing what it's supposed to do, but my best guess at something that would at least not error:

class SampleOptions extends React.Component {
  constructor(props, context) {
     super(props, context);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      activeKey: this.getDefaultKey(),
    };
  }
  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    return (
      <PanelGroup
        accordion
        activeKey={this.state.activeKey}
        onSelect={this.handleSelect}
      >
        {optionList}
      </PanelGroup>
    );
  }
}

Kaja