Fetching from API in React

Today we are going to make a request to Unsplash (https://unsplash.com/) API which is a company that provides a database of stocks pictures. You can search by any category through an input like “cars”.

I have already implemented my components as shown below:

App component:

import React from 'react';
import SearchBar from './SearchBar'

class App extends React.Component {
onSearchSubmit(term){
console.log(term)
}
render(){
return (
<div className="ui container" style={{marginTop: "10px"}}>
<SearchBar onSubmit={this.onSearchSubmit}/>
</div>
);
}
}
export default App;

Search bar component:

import React from 'react'
class SearchBar extends React.Component {
state = { term: " "};
onFormSubmit = (event) => {
event.preventDefault();
this.props.onSubmit(this.state.term)
};
render() {
return <div className="ui segment">
<form onSubmit={this.onFormSubmit}className="ui form">
<div className="field">
<label>Image Search:</label>
<input
type="text"
value={this.state.term}
placeholder="Example: Audi"
onChange={e => this.setState({ term: e.target.value})}/>
</div>
</form>
</div>
}
}
export default SearchBar;

On this app, I have already implemented the search bar that can take the user input and pass the information to the App component. Now I just need to do my API request and show that information from the API to the user.

First, we need to create an account with them as a developer https://unsplash.com/developers, after the account is created you will have the following message:

Click on New Application to get started. Accept all the rules or terms of service as shown below:

Scroll down to the button Accept terms to continue. It will prompt you to create an application name:

Create your application name and the description and click Create Application to continue. Scroll down to go directly to Keys:

This is the information we are going to use to have access to the API. Copy and past that information somewhere safe.

right now let's create the fetch request:

I’m going to use AXIOS instead of the regular fetch request because is easier and predictable.

Install Axios like this:

yarn install axios // or npx install axios.

Make sure to import Axios on the component where you are going to use it.

import axios from 'axios';

By reading the documentation you will notice that you need the correct URL for photos: Full base URL: https://api.unsplash.com/search/photos. You will need a query as params and in this case, it will be the input returned from the searchBar component: term.

For the header, you will need the Authorization and the access code like so: Authorization: ‘Client-ID zIN- your code’

onSearchSubmit(term){
axios.get('https://api.unsplash.com/search/photos', {
params: { query: term },
headers: {
Authorization: 'Client-ID zIN-FurWn1HMVuVrNA08M5IPNbNcLT6S3fuSXZPxgvM'
}
});
}

Here we will have access to the API so later on, we will manage the data. See you in part 2.