How to use axios to make requests in react

Question

I started learning React about 3 or 4 months ago. Initially went through Codecademy's course, and have since polished up a lot with other courses and tutorials, the main of which used Axios for get requests without really explaining Axios. I decided to go back to the "Ravenous" yelp clone project at Codecademy, the instructions of which are for class components, and thought it would be a nice challenge to complete that same project but with functional components. Everything was perfect until it was time to wire up the Yelp api, and given my lack of knowledge with axios and requests in general, I can't pinpoint what I'm doing wrong. I'm almost certain that I'm doing something wrong in Yelp.js, but I can't be sure because I'm getting a type error that "fetchRestaurants" is not a function in App.js, no matter which way I call it. I think it involves Promises, and I tried using async/await on searchYelp, but this part is all new to me.

Here's Yelp.js:

import axios from "axios";

const KEY =   "RwNYGeKdhbfM1bo6O8X04nLNR7sKjIXyAQ-Fo-nz-UdNHtSKDAmHZCc9MSiMAVmNhwKrfcukZ0qlHF1TdVIRSrgak3-oHVNmGD5JPR4ysxhfGd1hgOllt83H1i44X3Yx";

const fetchRestaurants = (term, location, sortBy) => {   const corsApiUrl = "https://cors-anywhere.herokuapp.com/";   return () => {
    axios
      .get(
        `${corsApiUrl}https://api.yelp.com/v3/businesses/search?categories=restaurants&location=${location}&term=${term}&sort_by=${sortBy}`,
        {
          headers: {
            Authorization: `Bearer ${KEY}`,
          },
        }
      )
      .then(res => res.data.businesses)
      .catch(error => console.log(error.response));   }; };

export default fetchRestaurants;

And here's App.js:

import React, { useState } from "react";
import BusinessList from "./BusinessList";
import SearchBar from "./SearchBar";
import Yelp from "./Yelp";
import "./App.css";

const App = props => {
  const [businesses, setBusinesses] = useState([]);

  const searchYelp = (term, location, sortBy) => {
    const businessList = Yelp.fetchRestaurants(term, location, sortBy);
    setBusinesses(businessList);
  };

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

export default App;

Apologies in advance if this was supposed to be posted somewhere else. Noob probs.

score 0 · Answer 1 · answered Apr 28 '21 at 18:12

0

you did not save the response anywhere. .then(res => res.data.businesses) here the response should've been saved somewhere, either a varibale or state. also your function responseble for the axios request doesn't return anything.

answered Apr 28 '21 at 18:12

Adarsh

428
5
16

score 0 · Answer 2 · answered Apr 28 '21 at 18:26

0

It's not an issue with axios itself, but how you use it in your React application.

Yelp.js: fetchRestaurants() should return a proper value (promise in this case) :

const fetchRestaurants = (term, location, sortBy) => {   
  return axios
      .get(url, options)
      .then(res => res.data.businesses)
      .catch(...)
}

App.js: All API calls should be done using useEffect hook:

useEffect(() => {
   Yelp.fetchRestaurants(term, location, sortBy)
     .then(businessList => setBusinesses(businessList));
}, [term, location, sortBy]);

answered Apr 28 '21 at 18:26

peter

583
2
11

I see that I had return () => {axios... instead of directly returning axios, so I fixed that. I removed the searchYelp function and put Yelp.fetchRestaurants into the useEffect per your suggestion, but now term, location and sortBy are undefined. searchYelp was passing those arguments to the searchbar as props as you see in my OP to be used in a handleSearch onClick to the search button. SearchBar.js sets the state for term, location and sortBy, how do I pass them back to the arguments in the useState in App.js? – Justin Bender Apr 28 '21 at 19:44
@Justin Bender I would try passing corresponding setters to SearchBar: , where setSearchCriteria calls setTerm(term), setLocation(location) and setSortBy(sortBy). You may find this helpful as well: https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs – peter Apr 28 '21 at 20:24

How to use axios to make requests in react

2 Answers2