1

I'm still a newbie in Reactjs and I'm trying to build a single page for my project. And I'm thinking to click the logo image and reload the page.

I have tried 2 ways, one is using <a href="javscript:location:reload: true"> in front of image element but I got this Script URL is a form of eval no-script-url in my console.

I also tried onClick eventlistener but nothing is working. I appreciate any helps, or new way to build this?

Below is my Home.js

class Home extends React.Component {
   render() {
     return (
       <div>
         <a href="javascript:location.reload(true)"><img src={MindScribeLogo} className="HomePage" alt="logo" /></a>
       <div>
         <img src={MindScribeZebra} className="HomePage" alt="zebra" />
       </div>
     </div>
    );
  }
}
export default Home;

Below is my App.js

class App extends Component {
  render() {
    return (
      <div className="App">
      <Home/>
    );
  }
}
Johnny88520
  • 157
  • 4
  • 13

1 Answers1

3

Hmm you can try a basic onClick function. hrefs are not supposed to contain scripts.

<img onClick={() => this.reloadPage()}/>

reloadPage () {
  window.location.reload()
}
Rebecca Tay
  • 331
  • 1
  • 11
  • But why would you say href is not supposed to contain scripts? – Johnny88520 Feb 22 '18 at 03:34
  • i'm quite noob, but this thread seems to explain the 'eval' warning better: https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – Rebecca Tay Feb 22 '18 at 04:26