Ravenous part 3 - TypeError: this is undefined

Can anyone help me to figure out why I keep getting TypeError: this is undefined as soon as I start typing a location in the browser?

Here is my SearchBar.js:

import React from 'react';
import './SearchBar.css';


class SearchBar extends React.Component {
    constructor(props){
        super(props);
        this.state = {term:'',location:'',sortBy:'best_match'};

        this.handleTermChange = this.handleTermChange.bind(this);
        this.handleTermChange = this.handleTermChange.bind(this);
        this.handleSearch = this.handleSearch.bind(this);

        this.sortByOptions={'Best Match':'best_match','Highest Rated':'rating' ,'Most Reviewed':'review_count'};}

    renderSortByOptions() {
        return Object.keys(this.sortByOptions).map(sortByOption=> {
         let sortByOptionValue = this.sortByOptions[sortByOption];
         return <li className={this.getSortByClass(sortByOptionValue)} onClick={this.handleSortByChange.bind(this, sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>
     });}
    
    getSortByClass(sortByOption){
        if (this.state.sortBy===sortByOption) {return 'active';}
        else {return '';}}

    handleSortByChange(sortByOption) {
        this.setState({sortBy: sortByOption})
    }

    handleTermChange(event){
        this.setState({term: event.target.value});}

    handleLocationChange(event) {
        this.setState({location: event.target.value});}

    handleSearch(event) {
        this.props.searchYelp(this.state.term,this.state.location,this.state.sortBy);
        event.preventDefault();
    }
    
    render () {
        return (
        <div className="SearchBar">
            <div className="SearchBar-sort-options">
            <ul>
                {this.renderSortByOptions()}
            </ul>
            </div>
            <div className="SearchBar-fields">
            <input placeholder="Search Businesses" onChange={this.handleTermChange} />
            <input placeholder="Where?" onChange={this.handleLocationChange} />
            </div>
            <div className="SearchBar-submit">
            <a href='#' onClick={this.handleSearch}>Let's Go</a>
            </div>
      </div>
      );
    }
   }


export default SearchBar;

Why is that line repeated?

Still reading…

if you’re manually binding methods and then end up having an unbound this … that’s a bit suspicious no?

can’t do much without being able to reproduce the situation though, since finding the cause is something you’d do by working you way backwards from that situation to the cause - and this is not a complete executable program

1 Like

that’ll end up unbound

2 Likes

That was the issue!! Thank you I missed it somehow

1 Like

A post was split to a new topic: Keeps giving INVALID_CLIENT: Invalid redirect URI error