Fetch and Display Data From API in React JS

The Fetch() built-in method allows users to consume API to get and send data to the server, in this tutorial, we will show you how to consume API using fetch() method to fetch and display data in React JS.

How to Retrieve and Display Data From API in React JS

Steps to fetch and display data in list from API:

Step 1 – Create React App

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

npx create-react-app my-react-app

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

npm start

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

Step 2 – Install and Set Up Bootstrap

Run the following command to install react boostrap library into your react app:

npm install bootstrap --save

Set up 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

Create a listing.js file in src directory, and implement axios or fetch HTTP client requests to consume apis in it to get and display data 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;

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