CODEWITHSUNDEEP
reactjsreact-nativenetwork-programmingaxiosreact-hooks
Priya
Priya

Reputation: 11

How do I use axios to fetch data from API with different params using hooks?

I am trying to make a restaurant finder app & I am using an API https://developers.zomato.com/api/v2.1'. So in that API, many ways are there to get data like based on location, shop name etc. So how do I implement that using Axios with hooks & also I should display? or you can consider this question as how to perform api request & display on screen using axios with hooks ?

I am sharing my code below:-

import React, { useState } from 'react';
import { View, Text, Platform, StyleSheet } from 'react-native';
import SearchBar from '../components/SearchBar';
import zomato from '../api/zomato';

const SearchScreen = (props) => {

const [term, setTerm] = useState('');
const [results, setResults] = (['']);


/////// Making API request
/*
const searchAPI = async () => {
    //try{}
    const response = await zomato.get('/search');
   setResults(response.data.restaurants) ;

 };    
 */
const inputTerm = (event) => {
    setTerm(event);
};

return (

    <View>
        <SearchBar
            term={term}
            onTermChange={inputTerm} 

            onTermSubmit={searchAPI}
            />
        <Text> this is search screen</Text>
        <Text>We have found {results.length} result</Text>

    </View>

  );

};

So below I am posting searchBar.js file

 const SearchBar = (props) => {

return (
    <View style={styles.background}>
        <Feather style={styles.iconStyle} name='search' size={30
        } />
        <TextInput

            style={styles.textStyle}
            placeholder='Search' 
            value={props.term}
            onChangeText={props.onTermChange}
            onEndEditing={props.onTermSubmit}
            />
    </View>

);

};

this is my zomazto.js file import axios from 'axios';

export default axios.create ({
baseURL: 'https://developers.zomato.com/api/v2.1',

headers : {
    Authorization: 'Bearer e2ba1e85d07189511cade3ad235fd44c'
}
});

Upvotes: 0

Views: 536

Answers (1)

Jan Mlčoch
Jan Mlčoch

Reputation: 71

If I understand your problem, You need to pass a query param into your request to find restaurants according to what you typed into the input in SearchBar component.

You don't need a hook here, just add the param into your request like:

/////// Making API request
const searchAPI = async () => {
   const response = await zomato.get(`/search?q=${term}`);
   setResults(response.data.restaurants) ;
};

Upvotes: 1

Related Questions