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.

This is my react code:

class Premontessori extends React.Component{
      constructor(props){
        super(props);
        this.state={
          post:[],
          id:[]

        };
        this.handleClick = this.handleClick.bind(this);

      }

      handleClick(event) {
          alert(event);
        }


    ponentDidMount(){
       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(
          <div className="w3-container">
          <div className="w3-display-container">
        <div className="w3-panel w3-border w3-yellow  w3-padding-4 w3-xxlarge  ">
        <p >List Of Students</p>
         <div className="w3-display-right w3-container">
         <Link className="w3-btn-floating w3-yellow" style={{textDecoration:'none',float:'right'}} to="/createstudent">+</Link>

         </div></div>
         </div>


          <ul  className="w3-ul w3-card-4  w3-yellow">  {this.state.post.map(function(item, index) {

                           return (

                                <Link  to="/displaylist" style={{textDecoration:'none'}} key={index}  onClick={this.handleClick}>
                                <li className=" w3-hover-green w3-padding-16" >
                                <img src={require('./3.jpg')} className="w3-left w3-circle w3-margin-right " width="60px" height="auto" />
                                <span>{item.Firstname}</span><br/><br/>
                                </li>
                                 </Link>




    )}
    )}
    </ul>



    </div>
        );
      }
    }
    export default Premontessori;

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.

This is my react code:

class Premontessori extends React.Component{
      constructor(props){
        super(props);
        this.state={
          post:[],
          id:[]

        };
        this.handleClick = this.handleClick.bind(this);

      }

      handleClick(event) {
          alert(event);
        }


    ponentDidMount(){
       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(
          <div className="w3-container">
          <div className="w3-display-container">
        <div className="w3-panel w3-border w3-yellow  w3-padding-4 w3-xxlarge  ">
        <p >List Of Students</p>
         <div className="w3-display-right w3-container">
         <Link className="w3-btn-floating w3-yellow" style={{textDecoration:'none',float:'right'}} to="/createstudent">+</Link>

         </div></div>
         </div>


          <ul  className="w3-ul w3-card-4  w3-yellow">  {this.state.post.map(function(item, index) {

                           return (

                                <Link  to="/displaylist" style={{textDecoration:'none'}} key={index}  onClick={this.handleClick}>
                                <li className=" w3-hover-green w3-padding-16" >
                                <img src={require('./3.jpg')} className="w3-left w3-circle w3-margin-right " width="60px" height="auto" />
                                <span>{item.Firstname}</span><br/><br/>
                                </li>
                                 </Link>




    )}
    )}
    </ul>



    </div>
        );
      }
    }
    export default Premontessori;

• javascript
• reactjs

• 1 try onClick={this.handleClick.bind(this)} – Syam Pillai Commented Feb 10, 2017 at 10:57

2 Answers 2

When you pass this.handleClick to Link, at the moment the event happens and function gets executed, the latter happens in context of instance of Link. And since Link ponent doesn't have handleClick prop, the operation fails.

Try to declare handleClick in a way it gets bound to current ponent at the time of instantiation:

handleClick = event => {
  alert(event);
}

Or use Function#bind in your render function:

<Link onClick={this.handleClick.bind(this)} />

• Link is already has an internal hanlder for clicking which is redirection to another Route , and it is a markup solution .

• React router provides also a non-markup solution to redirect which is browserHistory.push.

Thus :

   import {browserHistory} from 'react-router'

   handleClick(event) {
     event.preventDefault();
     alert('you clicked me');
     browserHistory.push('/displaylist');
   }

    <a  style={{textDecoration:'none'}} key={index}  onClick={this.handleClick}></a>

Instead of

   import {Link} from 'react-router'

   <Link  to="/displaylist" style={{textDecoration:'none'}} key={index}  onClick={this.handleClick}>