Maximum call stack size exceeded - Connected React Component

Question

I can\'t for the life of me figure out why I\'m getting error:

Maximum call stack size exceeded

When this code is run. If I com

Answer 1

Because of this loop:

  render  ----->   getTabs  ----->  setState -----
    ^                                            |
    |                                            |
    |____________________________________________v

You are calling getTabs method from render, and doing setState inside that, setState will trigger re-rendering, again getTabs ..... Infinite loop.

Remove setState from getTabs method, it will work.

Another issue is here:

onclick={this.tabChanged(idx, headline)}

We need to assign a function to onClick event, we don't need to call it, but here you are calling that method, use this:

onclick={() => this.tabChanged(idx, headline)}