0

I am new to promises and async/await in React environment.

I am getting undefined in Searchbar.js when I am returning the result of a fetch request.

Searchbar.js:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import {getSearchResults} from './unsplashAPI';

const Searchbar = (props) => {
    const onSearch = (e) =>  {
        const searchQuery = e.target.value;
        const searchResults = getSearchResults(searchQuery);
        console.log(searchResults);
    }

    return <TextField onChange={onSearch}/>
};

export default Searchbar;

unsplashAPI.js:

const AccessKey = '**redacted**';
const rootURL = 'https://api.unsplash.com/';

// get search results
const getSearchResults = (query) => {
    fetch(`${rootURL}/search/photos?client_id=${AccessKey}&query=${query}`, {
        method: 'GET',
        headers: {}
    }).then(response => {
        return response.json();
    }).then(response => {
        return response.results;
    }).catch(err => {
        console.log(err)
    });
}

export {getSearchResults};
macborowy
  • 1,474
  • 10
  • 13

0 Answers0