Interacting with the Yelp API - React Hooks Last Stage

Following the guidance of the Interacting with the Yelp API project instructions, I decided to create it with React Hooks, rather than using traditional this.state for everything.

However, now I am in a bit of a pickle, and rather stuck!

I am looking now to move away from using the object for business, as this was used solely as sample data, created initially to preview the CSS. Now, I would like to use the Yelp API.

When entering sample data into searchYelp and running it through console.log, I receive a returned array with the data. Everything (I think), works, and I just need to move over from using static data, to using live.

Code for business that was hard-coded:

export const business = {
  imageSrc: '',
  name: 'MarginOtto Pizzeria',
  address: '1010 Paddington Way',
  city: 'Flavortown',
  state: 'NY',
  zipCode: '10101',
  category: 'Italian',
  rating: 4.5,
  reviewCount: 90

How I had the business array show when it was hard-coded:
const businesses = [business, business, business, business, business, business]

How I used searchYelp to test whether the API worked:

searchYelp('Food', 'New York', 'best_match')


import React, {useState} from 'react'

import './App.css';
import SearchBar from '../Components/Search Bar/Search Bar';
import BusinessList from '../Components/Business List/Business List';

import searchYelp from '../util/Yelp'

function App() {
  const [businesses, setBusinesses] = useState([])
  const handleSearchYelp = async (term, location, sortBy) => {
    const data = await searchYelp(term, location, sortBy)
  return (
    <div className="App">
      <SearchBar searchYelp={handleSearchYelp} />

      <BusinessList businesses={businesses} />

export default App;


import React, { useState } from "react";
import "./Search Bar.css";

export default function SearchBar({searchYelp}) {
  const [term, setTerm] = useState("Food Trucks");
  const [location, setLocation] = useState("New York");
  const [sortBy, setSortBy] = useState("best_match");

  const sortByOptions = {
    "Best Match": "best_match",
    "Highest Rated": "rating",
    "Most Reviewed": "review",
  const renderSortByOptions = () => {
    const objectKeys = [...Object.keys(sortByOptions)]
    const objectValues = Object.values(sortByOptions);
    const mapObjectKeys =, index) => (
        className={sortBy === objectValues[index] ? "active" : ""}
        onClick={() => {
    return mapObjectKeys;
  function handleSubmit(e) {
  return (
    <div className="SearchBar">
      <div className="SearchBar-sort-options">
      <form onSubmit={handleSubmit}>
        <div className="SearchBar-fields">
            onChange={({ target }) => {
            placeholder="Search Businesses"
            onChange={({ target }) => {
        <div className="SearchBar-submit">
          onClick={() => {
            searchYelp(term, location, sortBy)
          >Let's Go</button>




const apiKey =  "TOP SECRET";
const corsAnywhere = "";
export default async function searchYelp(term, location, sortBy) {

  const url = `${term}&location=${location}&sort_by=${sortBy}`;

  const data = await fetch(`${corsAnywhere}${url}`, {
    headers: {
      Authorization: `Bearer ${apiKey}`,

  const response = await data.json();

  if (response) {
    const businesses = => {
      return {
        imageSrc: business.image_url,
        address: business.location.address1,
        state: business.location.state,
        zipCode: business.location.zip_code,
        category: business.categories,
        rating: business.rating,
        reviewCount: business.review_count

    return businesses
  } else {
    throw new Error("Request failed!");


import React from 'react';
import './Business.css';
import { business } from '../../App/App';

export default function Business() {
    const { imageSrc, name, address, city, state, zipCode, category, rating, reviewCount } = business
    return (
        <div className="Business">
            <div className="image-container">
                <img src={imageSrc} alt='' />

            <div className="Business-information">
                <div className="Business-address">
                    <p>{zipCode} {state}</p>

                <div className="Business-reviews">
                    <h3 className="rating">{rating} stars</h3>
                    <p>{reviewCount} reviews</p>

Business List.js

import React from 'react';
import './Business List.css'
import Business from '../Business/Business'

export default function BusinessList({businesses = []}) {
    return (
        <div className="BusinessList">
            {businesses?.map((business) => <Business key={} business={business}/>