Have to click twice to get React Components to Render correctly

#########UPDATE#########
The problem is that you have to login! If anyone is familiar with the Jammming project and maybe can explain in more detail why with the search button you could login and search with one click it would be helpful. If not I guess I will just have to have one button that gets the Access Token and another one that displays the recommendations. I have tried combining Spotify.getAccessToken() and this.setRecommedations to one onClick method but even then once Spotify.getAccessToken() is called it just stops or skips the next line. and forces me to re-click.
#########old post#########
Hello, I am sorry to just dump a repository on you guys, but I can’t nail down this bug exactly so here is my repository: https://github.com/tstrouth/spotifyrec

I am trying to build off Jammming project and making a recommendation centered Spotify Web App. I have a button

<button className="button" onClick={this.setRecommendations}>
            Log Into Spotify
          </button>

it runs

setRecommendations(){
    recommendations().then(recs => {
      this.setState({recommendations: recs});
    });
  }

Changes

this.state = {
      recommendations: [],
      ....

here is the recommendations function

//get recommendations based off song history
export async function recommendations(){
  const unique = await findUnique();
  const recommendations = [];
  for(var index = 0; index < unique.length; index++){
    var trackURI = (unique[index].uri).slice(14, (unique[index].uri).length);
    var rec = await Spotify.recommendations(trackURI, unique[index].pop);
    for(var i=0; i<rec.length; i++){
      if (!(songIn(rec[i], recommendations))){
        recommendations.push(rec[i]);
      }
    }
  }
  return await recommendations;
}

And whenever I click on the button, I am taken to Spotify to login and I login and nothing happens. I click the button again and then the recommendation panel populates. I do notice that after you login the url changes to like “localhost:3000/#access-token:[access token]” and when you click again the url goes back to normal, before the recommendation panel populates.

I also notice if I change onClick=this.setRecommendations to onClick=this.setRecommendations() when I go to localhost I am immediatley taken to the Spotify login page, then when I click the button recommendation panel populates immediately. But it updates under render() so much that it is still difficult to use.

Use componentDidMount to bring up the login screen automatically whenever your page loads.

componentDidMount() {
window.addEventListener('load', function())}