Ravenous Part4

Hey everyone, when I input a business name like Taco , city Seattle, and I click on Let’s go button in Search bar of ravenous page it doesn’t go no where.
I don’t know what to do, I spent a couple of hours and no solution.
Please help me
I don’t know where I done something wrong. And what link do we need to put on that a tag in SearchBar.js?
here’s my code:
Yelp.js

const apiKey = 'HSvKZQ7vPDUKHjC5_uvY0Mv23JPTd2V8SfAKFuyAWu4KWQIF2VJ5_TKpH1xRTLRJJXDydmvVRMmNC-fnq1aLcs7x0SvTiHgAWKE_STDk1DXtqZRJqZJlwf_2dfGiX3Yx';

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 => ({

                     id: business.id,

                     imageSrc: business.image_url,

                     name: business.name,

                     address: business.location.address1,

                     city: business.loaction.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;

SearchBar.js

import React from 'react';

import './SearchBar.css';

const sortByOptions = {

'Best Match': 'best_match',

'Highest Rated': 'rating',

'Most Reviewed': 'review_count'

};

class SearchBar extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      term: '',

      location: '',

      sortBy: 'best-match'

    }

    this.sortByOptions = {

      "Best Match": "best_match",

      "Highest Rated": "rating",

      "Most Reviewed": "review_count"

    }

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

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

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

    this.handleSortByChange = this.handleSortByChange.bind(this);

  }

    getSortByClass(sortByOption) {

      if(sortByOption === this.state.sortBy) {

        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 = sortByOptions[sortByOption];

     return <li onClick={this.handleSortByChange.bind(this, sortByOptionValue)} className={this.getSortByClass(sortByOptionValue)} key={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 href='foo' onClick={this.handleSearch}>Let's Go</a>

        </div>

      </div>

     );

 }

}

export default SearchBar;

App.js

import React from 'react';

import './App.css';

import SearchBar from '../SearchBar/SearchBar';

import BusinessList from '../BusinessList/BusinessList';

import Yelp from '../../util/Yelp';

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

     businesses: []

    };

    this.searchYelp = this.searchYelp.bind(this);

  }

  searchYelp(term, location, sortBy) {

    Yelp.searchYelp(term, location, sortBy).then((businesses) => {

      this.setState({businesses: businesses});

    });

    }

   render() {

    return (

      <div className="App">

      <h1>ravenous</h1>

     <SearchBar searchYelp={this.searchYelp}/>

      <BusinessList businesses={this.state.businesses} /> 

     </div>

    );

  }

}

export default App;

Business.js

import React from 'react';

import './Business.css';

class Business extends React.Component {

    render() {

      const {business} = this.props;

return (

    <div className="Business">

  <div className="image-container">

    <img src={business.imageSrc} alt=''/>

  </div>

  <h2>{business.name}</h2>

  <div className="Business-information">

    <div className="Business-address">

      <p>{business.address}</p>

      <p>{business.city}</p>

      <p>{business.state} {business.zipCode}</p>

    </div>

    <div className="Business-reviews">

      <h3>{business.category}</h3>

      <h3 className="rating">{business.rating}</h3>

<p>{business.reviewCount}</p>

    </div>

  </div>

</div>

)

    };

}

export default Business;

BusinessList.js

import React from 'react';

import './BusinessList.css';

import Business from '../Business/Business';

 class BusinessList extends React.Component {

    render() {

        return (

           <div className="BusinessList">

          {

       this.props.businesses.map((business) => {

           return <Business key={business.id} business={business} />;

       })

          }

           </div>

        );

    }

}

export default BusinessList;

Thank you in advance. :slight_smile: :blush:

Hello, and welcome to the forums!

Your search is causing an error, but other things in your code are preventing you from being able to see the error. Even the browser console may not show anything unless you have the ‘Preserve Log’ option turned on because it navigates to another page. Below is an explanation.

You set the href of the ‘Let’s Go’ link to foo, which would be fine if your event handler calls event.preventDefault(). However, your event handler handleSearch() only calls it after it calls another function that happens to be causing an error, so event.preventDefault() never actually runs and the browser ends up navigating to foo instead of displaying your error message and can clear the console depending on the settings. This would make troubleshooting very difficult.

Things you can do:

  1. Change the link to # so it would never try to navigate away, whether event.preventDefault() is called or not.
  2. You could move the event.preventDefault() call to be the first thing in handleSearch()

Doing either of those (I suggest doing both) will let you see the error message in the browser (and browser console) so you can continue troubleshooting and working through the project.

Now you’ll know where to tackle next and you can post again if you need some help.

Hey, I was doing the things that you said, I replaced ‘foo’ with ‘www.#.com’ , now if I try to search for a business still doesn’t go anywhere.

Changing the link to www.#.com would still try to make it go to another page. Either make the link # only and/or move up the call to event.preventDefault() in your handleSearch function. I still suggest you do both.