Fetch and Display Data From API in React JS

Fetch and display data from APIs in react js; This tutorial will provide you with a complete guide on how to fetch and display data from APIs in react js.

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

How to Retrieve and Display Data From API in React JS

Let’s follow the following steps to retrieve and display data from api in react js app:

• Step 1 – Create React App
• Step 2 – Install Bootstrap
• Step 3 – Create Listing Component
• Step 4 – Import Listing Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Bootstrap

In this step, execute the following command to install react boostrap library into your react app:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>How to Display Data From API in React JS using fetch()</h2>
    </div>
  );
}

export default App;

Step 3 – Create Listing Component

In this step, create listing.js file. So, visit the src directory of your react js app and create a listing component file named listing .js. And add the following code into it:

import React, { Component } from 'react';


class Listing extends Component {

    constructor(props) {
        super(props)   
        this.state = {
            records: []
        }
        
    }

    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(records => {
                this.setState({
                    records: records
                })
            })
            .catch(error => console.log(error))
    }

    renderListing() {
        let recordList = []
        this.state.records.map(record => {
            return recordList.push(`<li key={record.id}>{record.name}</li>`)
        })

        return recordList;
    }

    render() {
        return (
            `<ul>
                {this.renderListing()}
            </ul>`
        );
    }
}

export default Listing;

The above code uses the fetch API of the browser. It internally uses javascript promises to resolve the asynchronous response.

Step 4 – Import Listing Component in App.js

In this step, import the listing.js file in src/App.js file:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Listing from './Listing'
class App extends Component {
  render() {
    return (
      <div className="App">
        <Listing />
      </div>
    );
  }
}

export default App;

Conclusion

Fetch and display data from APIs in react js; You have learned how to fetch and display data from APIs in react js.

Recommended React JS Posts