Ravenous Part 3: SOS please help!

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

I also have a few questions about this part of the project, as it seems to deviate quite a bit from the CC lessons on changing stateless components to stateful components. I’m pretty confused by it all.

In the lessons, we are instructed that a parent component should pass its state to a child component. But isn’t App the parent component in this case, as we import SearchBar into it? So shouldn’t it be the state of App that is the one which sets the state of SearchBar? The parent should then define a method that calls this.SetState, but again this is on SearchBar.

Now that the parent has defined a method which updates its state and has bound to it, the next step would be the parent passing that method down to a child, in render’s return statement. This happens in the render statement of App, but the previous steps of defining a method to update the state and bind to it all happen in SearchBar

If someone could explain why this is, I would be so grateful.

Also, on step 25 when I type in the search box the type of food I’m searching for and location, the statement does not appear in the console of my browser.

I have gone through the solution code and compared it to mine line by line, and they look exactly the same to me. I also tried copying and pasting the solution code into my code editor and tried again logging the message to the console, but still nothing.

I’m wondering if anyone else has had a similar problem?

Here is my code:

App.js

import React from 'react';
//import logo from './logo.svg';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import BusinessList from '../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 React.Component {
  searchYelp(term, location, sortBy) {
    console.log(`Searching Yelp with ${term}, ${location}, ${sortBy}.`);
   }
  render() {
  return (
    <div className="App">
      <h1>ravenous</h1>
      <SearchBar searchYelp={this.searchYelp} />
      <BusinessList businesses={businesses} /> 
    </div>
  );
  }
}

export default App;


SearchBar.js

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 '';
      }
   }
   
   //If this changes the state, why don't bind it to this in the constructor?
   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];
           //Give the li element a new attribute, onClick, to create an event listener
           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;

Here is a screenshot of my console after searching:

Thanks very much in advance!

Hello,

I came to ask my own question and saw this post. Your code looks good. I do notice in the console your filter has some text in it. I would clear that filter and then see what you have.

In regard to your first question. I’m learning and trying to grasp/understand that myself, but wanted to at least offer a solution for the second part.

Happy coding,

That solved the console log problem, thank you so much!

I had that same issue! I kept clicking and clicking! Thank you so much; it said “public” in my filter.

I realised I had adBlock on and that’s why the result wouldn’t log to the console (in case anyone else has the same issue and uses adBlock)