Yelp Api business search not working in react native using axios - returns an empty array

Question

Having trouble getting the yelp api to work, it is supposed to search for businesses based on the set of term. I am using a async await function to GET the businesses/search object, then I am setting my params then updating state using setResults

 import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import SearchBar from "../components/SearchBar";
import yelp from "../api/yelp";

const SearchScreen = () => {
const [term, setTerm] = useState("");
const [results, setResults] = useState([]);

console.log(results);
console.log(term);

const searchApi = async () => {
 try {
   const response = await yelp.get("/search", {
     params: {
       limit: 50,
       term,
       location: "san jose",
     },
   });
   setResults(response.data.businesses);
 } catch (err) {
   console.log(err);
 }
};

return (
 <View style={styles.background}>
   <SearchBar term={term} onTermChange={setTerm} onTermSubmit={searchApi} />
   <Text>We have found {results.length} results </Text>
 </View>
);
};

const styles = StyleSheet.create({});

export default SearchScreen;

Here is the SearchBar component

import React from "react";
import { View, TextInput, StyleSheet } from "react-native";
import { Feather } from "@expo/vector-icons";

const SearchBar = ({ term, onTermChange, onTermSubmit }) => {
  return (
    <View style={styles.backgroundStyle}>
      <Feather name="search" style={styles.iconStyle} />
      <TextInput
        autoCapitalize="none"
        autoCorrect={false}
        style={styles.inputStyle}
        placeholder="Search"
        value={term}
        onChangeText={onTermChange}
        onEndEditing={onTermSubmit}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  backgroundStyle: {
    backgroundColor: "#FFF",
    height: 50,
    borderRadius: 5,
    marginHorizontal: 15,
    top: 15,
    flexDirection: "row",
    marginBottom: 20
  },
  inputStyle: {
    flex: 1,
    borderRadius: 5,
    fontSize: 18,
  },
  iconStyle: {
    fontSize: 35,
    alignSelf: "center",
    marginHorizontal: 15,
  },
});

export default SearchBar;

And here is where I used axios to set the baseUrl and header

import axios from "axios";

export default axios.create({
  baseURL: "https://api.yelp.com/v3/businesses",
  headers: {
    Authorization:
      "BearerZPzXkPFyF_mWgHVjj_a1QZqiFkktt_iXYcX8JED6Gp2i73aYJTsvfUSApIVh7w8B8CNYfwnvBKo50MZvR34dvO3Cm1tQxlFp_PnGgCFjce1h0I1UF3zcKHnr7eq8YnYx",
  },
});

Any Help is greatly appreciated I console.logged the results and term to make sure all my state is working and it is so it has to be some issue with how i'm getting the yelp api. My results always return an empty array.

When Console logged

the {result} just shows an empty array the starting state –

the {term} shows the state of whatever has been typed

Expected result

the {result} is supposed to show an arrays of objects matching "pasta" in the San Jose area and the number in the Text is supposed to show results.length

Answer 1

I tried your repo. At first I got a 401 error because of no space in the auth token

sdk_gphone_x86_arm:
Error: "Request failed with status code 401" in 

Then I got 400 for an invalid token

sdk_gphone_x86_arm:
start
sdk_gphone_x86_arm:
Error: "Request failed with status code 400" in 

After corrected both, the app runs successfully, you can try it in https://snack.expo.dev/@anthnoycc/searchscreen

Answer 2

hey i am learning react native from the same course and in my opinion the api key we are using is expired we have to get a new one in order for it to retrieve some data