Блог

Значения состояния передаются в реквизитах searchYelp в качестве параметров в функции handleSearch. Значения должны регистрироваться в консоли с помощью onClick. Однако аргумент, переданный в параметр term, не регистрируется в консоли, в то время как два других аргумента (местоположение, сортировка) регистрируются в консоли.

 import React, {useState} from 'react';
import './SearchBar.css';

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

function SearchBar({ searchYelp }) {
    const [ term, setTerm ] = useState('');
    const [ location, setLocation ] = useState('');
    const [ sortBy, setSortBy ] = useState('best_match');

    const getSortByClass = (sortByOption) => {
        if(sortBy === sortByOption) {
            return 'active';
        } else {
            return '';
        }
    }

    const handleSortByChange = (sortByOption) => {
        setSortBy(sortByOption);
    }

    const handleTermChange = ({ target }) => {
        setTerm(target.value);
    }

    const handleLocationChange = ({ target }) => {
        setLocation(target.value)
    }

    const handleSearch = (e) => {
        searchYelp(term, location, sortBy);
        e.preventDefault();
    }

    const renderSortByOptions = () => {
        return Object.keys(sortByOptions).map((sortByOption) => {
            let sortByOptionValue = sortByOptions[sortByOption];
            return <li onClick={()=>handleSortByChange(sortByOptionValue)} className={getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>
        })
    }

    return(
        <div className="SearchBar">
            <div className="SearchBar-sort-options">
                <ul>
                    {renderSortByOptions()}
                </ul>
            </div>
            <div className="SearchBar-fields">
                <input onchange={handleTermChange} placeholder="Search Businesses" />
                <input onChange={handleLocationChange} placeholder="Where?" />
            </div>
            <div className="SearchBar-submit">
                <a onClick={handleSearch} href="#">Let's Go</a>
            </div>
        </div>
    )
}

export default SearchBar;

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

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 = [business, business, business, business, business, business]

function App() {
  const searchYelp = (term, location, sortBy) => {
    console.log(`you are searching ${term} ${location} ${sortBy}`)
  }

  return (
    <div className="App">
      <h1>ravenous</h1>
      <SearchBar searchYelp={searchYelp} />
      <BusinessList businesses={businesses}/>
    </div>
  );
}

export default App;
 

<input onchange={handleTermChange} placeholder="Search Businesses" />

onchange должен быть верблюжьим регистром, поскольку onChange