This tutorial will teach you how to use Axios to fetch data and then how to manipulate it and eventually display it on your page with filtering functionality. You will learn how to use the map, filter and includes methods along the way. On top of that, you will be creating a Higher-Order Component (HOC) to handle the loading state of the fetched data from the API endpoint.
Let’s start with a clean React app. I assume you use create-react-app, and the filenames will be in accordance with its outputs.
We only need to install the Axios module for this tutorial.
Go to your project directory through the terminal window and then type in npm install axios -save in order to install Axios for your project locally.
Fetching the Data
We will be using the Random User Generator API to fetch random user information to use in our application.
Let’s add the Axios module to our application by importing it into our App.js file.
import axios from 'axios'
The Random User Generator API offers a bunch of options for creating various types of data. You can check the documentation for further information, but for this tutorial, we will keep it simple.
We want to fetch ten different users, and we only need the name, surname, and a unique ID, which is required for React when creating lists of elements. Also, to make the call a bit more specific, let’s include the nationality option as an example.
Below is the API that we will make a call for.
Note that I didn’t use the id option provided in the API due to the fact that it sometimes returns null for some users. So, just to make sure that there will be a unique value for each user, I included the registered option in the API.
https://randomuser.me/api/?results=10&inc=name,registered&nat=fr
You can copy and paste it into your browser and you will see the returned data in JSON format.
Now, the next thing is to make an API call through Axios.
First of all, let’s create a state so that we can store the fetched data.
Inside our App component, add a class constructor and then create the state.
constructor(props){
super(props)
this.state = {
users: [],
store: []
}
}
Here you see users and store states. One will be used for filtering purposes and will not be edited, and the other one will hold the filter results that will be shown in the DOM.
Now go ahead and create the componentDidMount() lifecycle hook.
Inside this lifecycle hook, we will fetch the data, and then by using the map method, we will create new intermediate data that we will use inside the setState method.
If you check the result of the API call in your browser, you will see that there are first and last key-value pairs inside the name object but no key-value pair for a full name. So we will be combining first and last to create a full name inside a new JavaScript Object. Note that JSON and JavaScript Object are different things, although they basically work the same way.
Let’s move step by step.
Add the following code to your App component.
componentDidMount(){
axios.get('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr')
.then(json => console.log(json))
}
When you check the console, you will see an object output. If you open up this object, there is another object inside it named data, and inside data, there is an array named results.
Let’s further change the console.log(json).
componentDidMount(){
axios.get('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr')
.then(json => console.log(json.data.results[0].name.first))
}
Here we reached the name of the first value inside the results array.
Now let’s use the built-in map method of JavaScript in order to iterate through each element inside the array and create a new array of JavaScript Objects with a new structure.
componentDidMount(){
axios.get('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr')
.then(json => json.data.results.map(result => (
{
name: `${result.name.first} ${result.name.last}`,
id: result.registered
})))
.then(newData => console.log(newData))
}
Here, we called the map method on json.data.results, which is an array, and then referred each element of the array as result (notice the singular/plural difference). Then, by using the key-value pair of each object inside the array, we created another object with name and id key-value pairs.
At the end, we used another then method in order to be able to refer to our new data. We referred it as newData, and then we just logged to the console to see if everything went as planned.
You should see a new array with objects having name and id pairs.
Storing the Data
Instead of logging the result to the console, we have to store it. In order to do that, we will use setState.
componentDidMount(){
axios.get('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr')
.then(json => json.data.results.map(result => (
{
name: `${result.name.first} ${result.name.last}`,
id: result.registered
})))
.then(newData => this.setState({users: newData, store: newData}))
.catch(error => alert(error))
}
Here, we initially set both users and store data with our new newData array.
We need two variables due to the fact that we need to store the original data and should never lose it. By using the information inside the store state, we can filter the data and then populate the users state and show it on the page. This will be clearer when we implement the filtering functionality.
Last but not least, we added catch to actually catch any possible errors during fetching and display the error as an alert message.
Filtering Functionality
The idea of filtering is quite simple. We have our store state, and it always keeps the original data without changing. Then, by using the filter function on this state, we only get the matching elements and then assign them to the users state.
this.state.store.filter(item => item.name.toLowerCase().includes(e.target.value.toLowerCase()))
The filter method requires a function as an argument, a function to be run for each element in the array. Here we refer each element inside the array as item. Then we take the name key of each item and convert it to lower case in order to make our filtering functionality case insensitive.
After we have the name key for the item, we check if this one includes the search string we typed in. includes is another built-in JavaScript method. We pass the search string typed in the input field as an argument to includes, and it returns if this string is included in the variable it was called on. Again, we convert the input string to lower case so that it does not matter whether you type upper or lower case inputs.
In the end, the filter method returns the matching elements. So we simply take these elements and store them inside the users state through setState.
Below you can find the final version of the function we created.
filterNames(e){
this.setState({users: this.state.store.filter(item => item.name.toLowerCase().includes(e.target.value.toLowerCase()))})
}
Creating the Components
Although for this small example we could put everything inside the App component, let’s take advantage of React and make some small functional/stateless components.
Let’s add the following structure to the render method of the App component.
render() {
const {users} = this.state
return (
NAME LIST
this.filterNames(e)}/>
);
}
For the time being, we will be just focusing on the functionality. Later, I will provide the CSS file I have created.
Notice that we have the searchFunc prop for the SearchBar component and the usernames prop for the List component.
Note that we use the users state instead of the store state to show the data because the users state is the one containing the filtered results.
The SearchBar Component
This component is quite straightforward. It only takes the filterNames function as a prop and calls this function when the input field changes.
import React from 'react'
const SearchBar = props => {
return(
)
}
export default SearchBar
The List Component
This one will simply list the names of the users.
import React, {Component} from 'react'
import LoadingHOC from './LoadingHOC'
import '../styles/main.css'
const List = (props) =>{
const{usernames} = props
return(
-
{usernames.map(user =>
- {user.name} )}
Here, we again used the map method to get each item in the array and create a
map to create a list of items, you need to use a key in order for React to keep track of each list item.
Notice that we wrapped List with another component named LoadingHOC before exporting it. This is how Higher-Order Components (HOCs) work.
What we did here is to pass our component as an argument to another component before exporting it. So this LoadingHOC component will be enhancing our component with new features.
The LoadingHOC Component
As I briefly explained before, a HOC takes a component as an input and then exports an enhanced version of the input component.
import React, {Component} from 'react'
import spinner from '../spinner.gif'
const LoadingHOC = (WrappedState) =>{
return(
class LoadingHOC extends Component{
render(){
return this.props.usernames.length === 0 ? 
:
Inside the HOC, we can directly access the props of the input component. So we just check whether the length of the usernames prop is 0 or not. If it is 0, this means that the data has yet to be fetched because it is an empty array by default. So we just show a spinner GIF that we imported. Otherwise, we just show the input component itself.
It’s imported in order not to forget to pass any props and states back to the input component with a spread operator. Otherwise, your component would be deprived of them.
CSS File
Below you can find the CSS file specific to this example.
body, html {
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
background-color: #f1f1f1;
font-family: 'Raleway', sans-serif;
-webkit-text-size-adjust: 100%;
}
body {
display: flex;
justify-content: center;
font-size: 1rem/16;
margin-top: 50px;
}
li, ul {
list-style: none;
margin: 0;
padding: 0;
}
ul {
margin-top: 10px;
}
li {
font-size: 0.8rem;
margin-bottom: 8px;
text-align: center;
color: #959595;
}
li:last-of-type {
margin-bottom: 50px;
}
.Card {
font-size: 1.5rem;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
border-radius: 10px;
background-color: white;
box-shadow: 0 5px 3px 0 #ebebeb;
}
.header {
position: relative;
font-size: 20px;
margin: 12px 0;
color: #575757;
}
.header::after {
content: '';
position: absolute;
left: -50%;
bottom: -10px;
width: 200%;
height: 1px;
background-color: #f1f1f1;
}
.searchBar {
text-align: center;
margin: 5px 0;
border: 1px solid #c4c4c4;
height: 20px;
color: #575757;
border-radius: 3px;
}
.searchBar:focus {
outline-width: 0;
}
.searchBar::placeholder {
color: #dadada;
}
.isLoading {
margin: 30px 0;
width: 150px;
filter: opacity(0.3);
}
Conclusion
Throughout this tutorial, we took a quick look at the Random User Generator API as a source of random data. Then we fetched the data from an API endpoint and restructured the results inside a new JavaScript Object with the map method.
The next thing was to create a filtering function with the filter and includes methods. Finally, we created two different components and enhanced one of them with a Higher-Order Component (HOC) by introducing a loading indicator when the data is not there yet.
Over the last couple of years, React has grown in popularity. In fact, we have a number of items in Envato Market that are available for purchase, review, implementation, and so on. If you’re looking for additional resources around React, don’t hesitate to check them out.
Powered by WPeMatico
