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

Do you get a 400 response? I noticed your Authorization token has a typo. It should have a space after "Bearer" — Anthony C, Jun 30 '22 at 03:05
no 400 response and added the space after bearer and there was no change. In the console it just logs the {term} and the {result} Here is the git repository if you'd like to check it out. https://github.com/dabdavlin/ReactNativeRestaurantApp.git — dabdavlin, Jun 30 '22 at 04:48
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 — dabdavlin, Jun 30 '22 at 04:57

score 0 · Answer 1 · answered Jul 01 '22 at 19:14

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

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

1 Answers1