React.js onclick event: Cannot read property 'props' of undefined

Question

I am a beginner in the react framework, so my question may appear basic to many of you. But believe me I've been stuck on this part. I am trying to get the text box value on button click and send the value to other function as a prop. I'm able to extract the value of textbox field but on the click event, i get an error 'Cannot read property 'props' of undefined'.

here are the important points:-

1. termchange() is used for extracting the input text value.
2. handleclick is used for extracting textbox value onclick event.
3. oncitychange is a function to which I've to send the value of textbox (oncitychange() function is inside different component).

Thank you in advance.

here's my code:-

import React,{ Component } from 'react';
import ReactDom from 'react-dom';
class SearchBar extends Component {
  constructor(props){
    super(props);
    this.state = {
      cityname:''
    }
  }

  render(){
    return(
      <div>
        <span>Enter the city: </span>
        <input type="text" id="txtbox" value={this.state.cityname} 
          onChange={event=>this.termchange(event.target.value)} />
        <input type="submit" onClick={this.handleclick} />
      </div>
    );
  }

  termchange(cityname){
    this.setState({cityname});
  }

  handleclick(){
    this.props.oncitychange(cityname);
  }
}

export default SearchBar;

Answer 1

It is all about scope. Your functions don't know what this is. You can bind this in the constructor or other options may be easier depending on your environment.

Add this to your constructor to fix:

this.termchange = this.termchange.bind(this); this.handleclick = this.handleclick.bind(this);

Or read https://blog.andrewray.me/react-es6-autobinding-and-createclass/ for a more detailed explanation of what is going on.

I personally use ES7 fat arrow class methods for the simplicity and I think most developers are moving in that direction.