react function is not defined no-undef

Question

I get the following error when trying to compile my app - 'getRestaurants' is not defined no-undef

I'm having trouble tracking down why getRestaurants is not defined for zipCodeToCoords

I have an input component that takes a zip code on submit and calls zipCodeToCoords, I then want to call getRestaurants

Here is the main react component

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      restraunts:[],
      selectedRestraunt:null
    }
  }


  getRestaurants(lat,lon){
    var url = "https://developers.zomato.com/api/v2.1/geocode?lat="+lat+"&lon="+lon;
    $.ajax({
      url:url,
      headers:{
        'Accept': 'application/json',
        'user_key': 'MY KEY'
      }

    }).done(function(data){
      console.log(data);
    });
  }


  zipCodeToCoords(zip){
    var url = "https://www.zipcodeapi.com/rest/MYKEY/info.json/"+ zip +"/degrees";
    $.ajax({
      url:url,

    }).done(function(data){
      console.log(data.lat);
      getRestaurants(data.lat,data.lng);
    });
  }




  render() {
    return (
      <div className="App">
        <div className="row">
          <div className="columns large-9">
            <Input onSearchTermSubmit={this.zipCodeToCoords} />
          </div>  
        </div>
        <div className="row">
          <div className="columns large-9">
            <RestrauntInfo />
          </div>
          <div className="columns large-3">
            <RestrauntList />
          </div>
        </div>
      </div>
    );
  }
}

Here is the Input component

class Input extends Component{

    constructor(props){
        super(props);
        this.state = {zip:''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleSubmit(event){
        event.preventDefault();
        this.props.onSearchTermSubmit(this.state.zip);
    }
    handleChange(event){
        this.setState({zip:event.target.value});

    }

    render(){
        return(<div>
            <form onSubmit={this.handleSubmit}>
                <div className="input-group">
                    <span className="input-group-label">Enter Zip Code</span>
                    <input className="input-group-field" type="number" value={this.state.zip} onChange={this.handleChange} />
                    <div className="input-group-button">
                      <input type="submit" className="button" value="Submit" />
                    </div>
                </div>  
            </form> 
        </div>);
    }
}

Answer 1

Get restaurants is not some global function, it is a method on your App class so you need to call it as such. The easiest way to resolve this would probably be to:

1. Change your done callback to an arrow function
2. Call this.getRestaurants in zipCodeToCoords
3. Bind this to getRestaurants and zipCodeToCoords in your constructor ie this.getRestaurants = this.getRestaurants.bind(this);

The callback would become:

done((data) => {
    console.log(data.lat);
    this.getRestaurants(data.lat,data.lng);
});

Answer 2

This looks to be a scoping problem, as you are passing down zipCodeToCoords its scope is from where it is called, not where you want. To fix this you can use .bind or if you are transpiling your app, you can change it to be an arrow function.

  zipCodeToCoords = (zip) => {
       ...
  }

You will also need to change getRestaurants(data.lat,data.lng); to call it from the scope, this.getRestaurants(data.lat,data.lng);