React Leaderboard infinte loop with setState

React Leaderboard infinte loop with setState
0.0 0
#1

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; https://gitlab.com/jacebenson/jacebenson.gitlab.io/blob/master/projects/react/leader/src/components/app.js#L35

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

I was following this guide on youtube https://youtu.be/u7hnOhwiydU?list=PLtwj5TTsiP7shy3ollmS_LmQk-Ct_wRSF&t=157

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

#2

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);
    //this.setState({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)

          campers={this.state[this.state.currentView]}
          currentView={this.state.currentView}
        />

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>
#3

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