title: How to use onClick event with <Link> in reactjs
body: <p>i am trying to get the Id of a student by clicking on the . But it's giving me error like TypeError: Cannot read property 'handleClick' of undefined. What's wrong in here.?? First atleast i need to get this handleClick function to be working.</p>
  
  <p>This is my react code: </p>
  
  <pre><code>class Premontessori extends React.Component{
        constructor(props){
          super(props);
          this.state={
            post:[],
            id:[]
  
          };
          this.handleClick = this.handleClick.bind(this);
  
        }
  
        handleClick(event) {
            alert(event);
          }
  
  
      componentDidMount(){
         let self = this;
        axios.get('http://localhost:8080/list')
        .then(function(data) {
            //console.log(data);
            self.setState({post:data.data});
            self.setState({id:data.data})
            });
        }
  
  
        render(){
          console.log(this.state.id);
          return(
            &lt;div className="w3-container"&gt;
            &lt;div className="w3-display-container"&gt;
          &lt;div className="w3-panel w3-border w3-yellow  w3-padding-4 w3-xxlarge  "&gt;
          &lt;p &gt;List Of Students&lt;/p&gt;
           &lt;div className="w3-display-right w3-container"&gt;
           &lt;Link className="w3-btn-floating w3-yellow" style={{textDecoration:'none',float:'right'}} to="/createstudent"&gt;+&lt;/Link&gt;
  
           &lt;/div&gt;&lt;/div&gt;
           &lt;/div&gt;
  
  
            &lt;ul  className="w3-ul w3-card-4  w3-yellow"&gt;  {this.state.post.map(function(item, index) {
  
                             return (
  
                                  &lt;Link  to="/displaylist" style={{textDecoration:'none'}} key={index}  onClick={this.handleClick}&gt;
                                  &lt;li className=" w3-hover-green w3-padding-16" &gt;
                                  &lt;img src={require('./3.jpg')} className="w3-left w3-circle w3-margin-right " width="60px" height="auto" /&gt;
                                  &lt;span&gt;{item.Firstname}&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;
                                  &lt;/li&gt;
                                   &lt;/Link&gt;
  
  
  
  
      )}
      )}
      &lt;/ul&gt;
  
  
  
      &lt;/div&gt;
          );
        }
      }
      export default Premontessori;
  </code></pre>