Ravenous part 3. getting a blank web page

Hi, After completing Ravenous part three I am getting a blank web page. I have gone through the help video and solution code and as far as I can tell my code is the same yet I am getting nothing. Also I am getting a error I dont understand on my terminal.
The error.

Compiled with warnings.

Line 70:11: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: eslint-plugin-jsx-a11y/anchor-is-valid.md at 93f78856655696a55309440593e0948c6fb96134 · jsx-eslint/eslint-plugin-jsx-a11y · GitHub jsx-a11y/anchor-is-valid

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

import React from ‘react’;
import ‘./SearchBar.css’;

class SearchBar extends React.Component {
constructor(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',
    'Hightest Rated': 'rating',
    'Most Reviewed': 'review_count'

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

handleSorByChange(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)

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


export default SearchBar;

import React from ‘react’;
import ‘./App.css’;
import SearchBar from ‘…/SearchBar/SearchBar’;
import BusinessList from ‘…/BusinessList/BusinessList’;

const business = {
imageSrc: ‘https://content.codecademy.com/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 = [

class App extends React.Component {
searchYelp(term, location, sortBy) {
console.log(Searching Yelp with ${term}, ${location}, ${sortBy})

render() {
return (


); } }

export default App;

Could you please format your code and post a link to the exercise?

Apologises but when I tried to format my code properly, I cound not post getting a 403 error. This was the only way I could think to post it. link

Oh, ok. Could you then link your Github repo?
What do you mean by “part 3”? After which check number / instruction does it stop rendering?

I think I hit the problem at step 4 but I continued coding so that I could access the solution file, but that was no help.

I’m also getting a 403 error.
So short form: check the spelling of handleSortByChange.
You declared it with a different spelling than you’re calling it with.

I corrected the spelling and now I am getting This site can’t be reached
this site can’t be reached
localhost refused to connect.



I tried publishing the site through github and got this Getting Started with Create React App | ravenous

This is not an error but just a warning and not related to your issue, I’m sure.

Do you get a new error (not warning) now?
When I start my app after a longer period of time, I get this error:

If I open the link, I get to this page:

Clicking the button “Request temporary access to the demo server” gives me access to the API for a period of time.
Not sure that this is your issue, too. Just a guess.

@mirja_t you’ll be happy to know I got the page to load by using another port. Thanks for all your assistance.

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.