TypeError: this.props.searchYelp is not a function?

Question

Just so you know I am a beginner at javascript and react.js. I am working on a project from Codecademy and I am stuck on an error code.

Error code I'm receiving:


    TypeError: this.props.searchYelp is not a function. (In 'this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy)', 'this.props.searchYelp' is undefined)

    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 | 

enter code hereView compiled

My SearchBar.js code:


    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;

My 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;

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

I have google my error code and can’t seem to find a solution…

Also, please let me know if you require any more information...

Thanks!

Katie

The error is right. There is no ``searchYelp`` function in your ``SearchBar`` class — josemartindev, May 22 '19 at 12:44
kindly share JSX code too something like `{//UR CODE} } />` share your `app.js` or `User.js` file please, https://stackoverflow.com/questions/31141444/reactjs-with-es6-this-props-is-not-a-function-when-i-communicate-two-components — Ashish Kamble, May 22 '19 at 12:49

score 0 · Answer 1 · answered May 22 '19 at 13:08

Here you are rendering your searchbar and passing your function state, binding this as using this context in another child component, Yelp is another const var declared.

Your app.js should be like,

class App extends React.Component {
constructor(props){
super(props);
this.state = {
 businesses:[]
};
this.searchYelp = this.searchYelp.bind(this);
}

searchYelp(term, location, sortBy){


       Yelp.search(term,location,sortBy)
       .then(businesses=>{this.setState
       ({
               businesses:businesses});
       });

   } 

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

export default App;

searchbar.js be like,

class SearchBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      term: '',
      location: '',
      sortBy: 'best_match'
    };

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

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

  getSortByClass(sortByOption) {
    if (this.state.sortBy === sortByOption) {
      return 'active';
    }
    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();
  }

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

yelp.js be like,

const clientId = 'KnUCjsgC_SwsKbyWhoY_KQ';
const secret = 'H26mxyT3NsVNCTCLf21NjPtPI0PRWKZUIWbkyycSf1Pzv7xPOjh7wCz1YyiSEoaO';
let accessToken;

//object
const Yelp ={
    getAccessToken(){
        if(accessToken){
            return new Promise(resolve =>resolve(accessToken));
        } 
        return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/oauth2/token?grant_type=client_credentials& client_id=${clientId}&client_secret=${secret}`,
        {method:'POST'
        }).then(response =>{
        return response.json();
        }).then(jsonResponse => {accessToken = jsonResponse.access_token;
      }); 
    },


    search(term, location, sortBy) {
    return Yelp.getAccessToken().then(() => {
      return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`, {
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      });
    }).then(response => {
      return response.json();
    }).then(jsonResponse => {
      if (jsonResponse.businesses) {
        console.log(jsonResponse.businesses);
        return jsonResponse.businesses.map(business => ({
          id: business.id,
          imageSrc: business.image_url,
          name: business.name,
          address: business.location.address1,
          city: business.location.city,
          state: business.location.state,
          zipCode: business.location.zip_code,
          category: business.categories[0].title,
          rating: business.rating,
          reviewCount: business.review_count
        }));
      }
    });
  }
};
export default Yelp;

score 0 · Answer 2 · answered May 22 '19 at 13:09

you have to check the declaration of your function (searchYelp) and why did you pass it as props? , you have just to declare it and then call it.

searchYelp=()=>{//what your function do}


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

score 0 · Answer 3 · answered May 22 '19 at 13:24

The declaration of your function is false, try this:

 searchYelp=(term, location, sortBy)=>{


           Yelp.search(term,location,sortBy)
           .then(businesses=>{this.setState
           ({
                   businesses:businesses});
           });

       }

score -1 · Accepted Answer · answered May 23 '19 at 08:19

-1

Don't worry I made a typo error in the App.js, it's working now!

Thanks anyway!

answered May 23 '19 at 08:19

katie365

1
1
3

TypeError: this.props.searchYelp is not a function?

4 Answers4