Question

175

How to reload a page (state) in a react app

rated 0 times [ 182] [ 7] / answers: 1 / hits: 99472 / 7 Years ago, sat, october 7, 2017, 12:00:00

I'm beginning to learn react.js and I've developer a simple rock paper scissors game in a react app. I'm finding it a bit difficult creating a reload button because it is of course different from the javascript button with a function like:

<button onclick=reload>RESTART GAME</button>

function reload() {

  location.reload();

}

For this react app what I thought would work was:

<button type=button onClick={ refreshPage }> <span>Reload</span> </button>

function refreshPage(){ 

  window.location.reload(); 

}

to the App.js file but I'm getting the error message:

./src/App.js

Syntax error: Unexpected token (64:11)



  62 |   }

  63 | 

> 64 |   function refreshPage(){

     |            ^

  65 |     window.location.reload();

  66 |   }

  67 | }

The complete project can be found here github (npm start will launch the project in terminal/console)

Any insight into how to correct this would be much appreciated, thank you!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

viridianaw

Add To Favorites

Follow

Total Points: 154

Total Questions: 94

Total Answers: 89

Location: South Georgia

Member since Sun, Aug 8, 2021

3 Years ago

answered 7 Years ago rocky · Accepted Answer

In react you don't have to refresh page to reset state. I looked at your project and saw that you are holding your scores and game data in component's state. This helps you to reset game easily with just setting the state to the initial values.

For Example

// add a method to your component for resetting state

restartGame(event) {

  this.setState({ games: [] });

}



// and in your components render or any other place add the reset button

<button type=button onClick={ this.restartGame.bind(this) }>

  <span>Reload</span>

</button>

Don't forget to bind your methods to be able to use this in them. For more information about that you can read react documentation for Handling Events.