React Leaderboard infinte loop with setState

React Leaderboard infinte loop with setState
0.0 0


Okay let me preface this with I have a working version of this project I made, but I wanted to separate out the components.

I did that and now the new version of the board runs but I cannot seem to set the state.currentView without doing so infinitly.

Right now the code is commented out here;

If this is uncommented my browser locks up and I don’t understand why.

I was following this guide on youtube

I’m kind of at a loss at how to fix this. Please help me fix this.


Im just suggesting here (im new to react)
but … this.setState({currentView}) should this not be this.setState({currentView: currentView}) at the moment it looks like your just naming what you want setState to change but not passing what you want it to change too

  changeView(currentView) {
    console.log(this.state.currentView + ' => '+ currentView);

Also this line confuses me … campers={this.state[this.state.currentView]} … why is this not campers={this.state.currentView} … (As i said im pretty new to react so this could be fine … just looks off to me)


Here im persuming you want to go to a different section but you have a click handler to change state of currentView … so im not sure where the a href is meant to take you

<a href="#alltime" onClick={this.changeView('campersAllTime')}>ALLTIME</a>


I had also asked this on gitter. Someone said that my problem was my onClick expects a function, not a function definition.

So I changed that from;

<a href="#alltime" onClick={this.changeView('campersAllTime')}>ALLTIME</a>
<div id="campersAllTime" onClick={() => this.changeView('campersAllTime')}>ALLTIME</div>           

It has an a tag because I kept trying different things that I found online to get this to work.

About the this.setState() that does something to rerender the components, so that is in fact what I want to do. I have this working at the moment, I just need to clean up the page with css and sort the recent array.

Thanks @JohnL3