Ravenous: Part 3 - TypeError: this.props.searchYelp is not a function

Hi,

I’m working on the - Ravenous: Part 3 - Setting the Search Bar’s State - https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-three/projects/setting-searchbar-state

When I try and enter something into the search bars and click “Let’s Go” button, I get an error. code that says:

TypeError: this.props.searchYelp is not a function

SearchBar.handleSearch
src/components/SearchBar/SearchBar.js:26
  23 | }
  24 | 
  25 | handleSearch(event) {
> 26 |     this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
     | ^  27 |     event.preventDefault();
  28 | }
  29 | 
View compiled

This is my code in SearchBar.js:

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

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

class SearchBar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            terms:'',
            location:'',
            sortBy:'best_match'
        };
        
        this.handleTermChange = this.handleTermChange.bind(this);
        this.handleLocationChange = this.handleLocationChange.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
    }
    

    handleSearch(event) {
        this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
        event.preventDefault();
    }

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

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

    getSortByClass(sortByOption) {
        if (sortByOption === this.state.sortBy) {
            return 'active';
        }
        return '';
    }

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




    renderSortByOptions() {
        return Object.keys(sortByOptions).map(sortByOption => {
            let sortByOptionValue = sortByOptions[sortByOption];
            return <li key={sortByOptionValue} onClick={this.handleSortByChange.bind(this, sortByOptionValue)} className={this.getSortByClass(sortByOptionValue)} >{sortByOption}</li>
        });
    }
    
    
    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 onClick={this.handleSearch} href="www.#.com">Let's Go</a>
                </div>
            </div>
        );
    }
}

export default SearchBar;

Is anybody able to help me? Where have I gone wrong?

I have compared my code with the solution files and can’t see any problems…

Also, please let me know if you require any more information or other code files…

Thanks!

Katie

Hi Katie,
Could you please share the code of Parent Component of SearchBar (where you’ve rendered it)?

1 Like

Hi,

Thanks for getting back to me.

App.js code:

import React, { Component } from 'react';
import './App.css';
import SearchBar from './components/SearchBar/SearchBar';
import BusinessList from './components/BusinessList/BusinessList';

const business = {
  imageSrc: 'https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg',
  name: 'MarginOtto Pizzeria',
  address: '1010 Paddington Way',
  city: 'Flavortown',
  state: 'NY',
  zipCode: '10101',
  category: 'Italian',
  rating: 4.5,
  reviewCount: 90
};

const businesses = [business, business, business, business, business, business];

class App extends Component {

  seachYelp(term, location, sortBy) {
    console.log(`Searching Yelp with ${term}, ${location}, and ${sortBy}`);
  }

  render() {
    return (
      <div className="App">
        <h1>ravenous</h1>
        <SearchBar searchYelp={this.searchYelp} />
        <BusinessList businesses={businesses} />
      </div>
    );
  }
}

export default App;

I think this is the right code file… please let me know if its not or if you require any further information or code files…

Thank you so much for helping me out I really appreciate this! :grinning::+1:

Katie

Hey @katie2899,
I guess there is a typo in method name?(hint: while defining it)

2 Likes

Thank you so much!!!

I can’t believe I missed that… I’ve been checking my code over and over with the solution file! :woman_facepalming::flushed:

Thank you again, I really appreciate this! :wink::+1:

Katie

1 Like

I also had this error but for another reason. In app.js I had forgotten to add the attribute:

searchYelp={this.searchYelp}

to the component in the render() method.