Ravenous part 4. Nothing happens after I click the 'Lets go" button. No errors too

This is my yelp.js code.

const { default: SearchBar } = require("../components/SearchBar/SearchBar");

const apiKey = 'IrpYJ0Y1izkugouGnZnYcufaCupkZDdsaIW2Ry-dmxe3KW4kljy2DlpqtP-u-HVbcj6nN0I8LGo1W1jgIKXETVZdpc71YcfRlFpddI0ufCIxgcm-FvaDsbr3ihMQX3Yx';

const Yelp = {
    search(term, location, sortBy) {
        return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`, {
            headers: {
                Authorization: `Bearer ${apiKey}`
            }
        }).then(response => {
            return response.json();
        }).then(jsonResponse => {
            if (jsonResponse.businesses) {
                return jsonResponse.businesses.map(business => {
                    return {
                        id: business.id,
                        imageSrc: business.imgage_url,
                        name: business.name,
                        address: business.location.address,
                        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;

My app.js code

import React from 'react';
import './App.css';
import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';
import Yelp from '../../util/Yelp.js';

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;

My searchbar.js code

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.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';
         }
         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();     
     }
    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 onChange={this.handleTermChange} placeholder="Search Businesses" />
                    <input onChange={this.handleLocationChange} placeholder="Where?" />
                </div>
                <div className="SearchBar-submit">
                    <a onClick={this.handleSearch}>Let's Go</a>
                </div>
            </div>
        );
    }
}
export default SearchBar;

In App.js, your use of setState is wrong.

setState is a function, not a property of this. :slight_smile:

// correct usage
this.setState({
   "key" : "new value"
});

Everything else looks fine, though I have no idea why you’re importing the SearchBar component into the Yelp.js file…