Fetch and Display Data From API in React JS

Fetch and display data from APIs in react js; This tutorial will provide you 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 Fetch and Display Data From API in React JS using fetch()

• 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