TIL/2021–02–15 & 16

Day 67 and 68: Treehouse Full Stack JavaScript Techdegree

Fetching Data with Fetch API and Axios in React

Fetching Data with the Fetch API

React itself doesn’t have a built-in way to fetch data from a server

There are two ways we can retrieve data from a server

  1. Fetch
  2. Axios

Both are promise-based approaches — they use JavaScript promises to handle the results we get back from the server

The state in our app is going to be the gif data we want to display

The gif state now represents a collection of objects that will change and be updated by components

Next, we will set up all of React’s data fetching in Reacts lifcycle method: componentDidMount(){} — when we need to load external data right when the component gets mounted to the DOM — this is a good place to make a request because at this point in the lifecycle the component has a DOM representation

The fetch API uses JavaScript promises to handle the results and promises let you chain methods in a sequential order — something happens after something else is done

Fetching data with axios — Promise based library that is similar to Fetch API

Stronger browser support than fetch

Supports the Promise API

Intercept Request and Response

Transform request and response data

Post data to a server

Protect your app against XSF or CSRF attacks and vulnerabilities

First let’s install axios as a project’s dependency

On the CLI: npm instal — save axios

And now it is in our project’s dependencies

On App.js let’s import axios

import axios from “axios”;

Then let’s delete the code we wrote earlier inside the componentDidMount()

The axios documentation contains all the available config options for performing a request


We can copy this example snippet and customize it from react

The get method performs the request

Then the chained then and catch methods also work exactly as the on in fetch

The function in then gets executed once the get request gets fulfilled and catch will handle any errors

Unlike fetch, axios automatically gets the response in JSON format we get to skip that step and just worry about updating state

If we console log the response

We automatically get the json format of the data/promise retrieved from axios.get(api)

So from this first then method we can already set the state to the data

— -

Displaying the data

To display each gif we have to map each of the gif objects to a gif component

On GifList.js

And on Gif.js

It works!

But we will get an error regarding the key since we need to add a key whenever we map over something in React so react can uniquely identify each object

So let’s add a key property to each object — most APIs returns a unique key id and we can use those

And it works!

— — — -

Building a search feature

On App.js create a function for performing a search

Remove the axios get request from componentDidMount() and add it to the performSearch() function — don’t forget to make the link a template literal so it can be dynamic

The new endpoint offers several parameters we can use to search query term or phrase, limit the number of results returned, offset the results and more

Now the parameter we need in our URL is the q parameter — and as you can see there is already a q parameter and a value in our URL — but the value should be dynamic. It is currently static — it should be the text a user types in the search results

Then on the SearchForm tag we can add the onSearch function as a prop

And on SearchForm.js

On the handleSubmit

And on GifList

And on Gif

And once we search for cat

It works!

— — -

Displaying search results

In our app the search text state is local to the searchForm component — the type of value of our input isnt really part of our application state

We can also use a ref to access the value of the input field

In react, refs allow you to reference or get direct access to the DOM element

Let’s convert the input form’s searchText state into a ref instead — much more recommended in using in bigger applications — less bugs

This.query = input: this is basically putting a reference to the input on the searchForm class.

The ref callback is immediately executed immediately after the component is mounted to the DOM. When the input is rendered to the page it returns a reference to this input which you can access with this.query

And it would work just the same with less code!

Now let’s make our app display a default list of gifs when it first loads

And we can do this by providing the performSearch function a default query parameter

performSearch = (query = “cats”) => {

And then call performSearch on the componentDidMount lifecycle method

And it works! It displays a list of cat gifs as soon as the app loads

Now what if no gifs are returned? Let’s say we type adasdasd on the search

We can render another component when there are no matches


And then on GifList we can have an if statement

But there is one small glitch we should fix, whenever the app loads, we see a quick view of the NoGifs component

This happens because the initial value of the gif state is an empty array — so in the short moment the data is being fetched, there are 0 results

To fix this we can initialize a loading state

So, once we do setState we change the value of the loading state to true since it has been loaded then, let’s adjust our if statement

Or we can do a loading indicator




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Unleash the power of SVG in LWC

Proxy ‘Magic’ with Next.js / Vercel

Next.js logo

A Guide to Separating State and Form with React and Redux

Vertical Range Slider — Vue.js

Mapping Arrays


Using Sails JS to Create an IMAP Email API

GraphQL: Server-side Subscriptions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Renzo Regio

Renzo Regio

More from Medium

Is it possible to become a blockchain developer in 3 months? If so, then how?

Amy Schumer’s comic yet critical voice

#31 The principles

The Mathematics Behind the Efficient Frontier