Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
API call in reactjs application using axios request
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
//install axios package using 'npm i axios' command
const axios = require('axios');
class App extends Component {
constructor(props) {
this.state = {
isLoading: true,
users: [],
error: null
componentDidMount() {
fetchUsers() {
// ...then we update the users state
.then(response =>
isLoading: false,
// Catch any errors we hit and update the app
.catch(err => console.log(err))
render() {
const {isLoading, users, error} = this.state;
return (
<div className="App">
<header className="App-header">
<img src={logo} classNa me="App-logo" alt="logo"/>
<h4>API User Collection</h4>
{/*Display a message if we encounter an error*/}
{error ? <p>{error.message}</p> : null}
{/*Here's our data check*/}
{!isLoading ? ( => {
const {username, name, email} = user;
return <li> username: {username} || Name: {name} || Email Address: {email} </li>;
// If there is a delay in data, let's let the user know it's loading
) : (
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment