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};