title: How to use onClick event on Link: ReactJS?
body: <p>In React router, I have <strong><em>to</em></strong> and <strong><em>onClick</em></strong> attributes as shown below</p>
  
  <pre><code>&lt;li key={i}&gt;&lt;Link to="/about" onClick={() =&gt; props.selectName(name)}&gt;{name}&lt;/Link&gt;&lt;/li&gt;
  
  state = {
      selectedName: ''
  };
  
  selectName = (name) =&gt; {
     setTimeout(function(){this.setState({selectedName:name});}.bind(this),1000);
     // this.setState({selectedName: name});
  }
  </code></pre>
  
  <ul>
  <li><strong><em>to</em></strong> attribute navigates to <em>about</em> Route </li>
  <li><strong><em>onClick</em></strong> assigns value to state variable selectedName which will be displayed when navigated to About page.</li>
  </ul>
  
  <p>When I give timeout insided function called on click, its navigating to new page and after sometime state is getting updated resulting in displaying previous name until state is updated with new name. </p>
  
  <p>Is there a way where it will navigate to the new route only after the code in onClick function gets executed.</p>
  
  <p>You can get the entire code [here].(<a href="https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js" rel="noreferrer">https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js</a>)</p>