React - Fetch data in Class component - Zone of Development React

In this post, we will see how to fetch data in a Class component.
In the React web site, they advise to use the method componentDidMount() because,
“is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.“

We start creating a Class component called GetListUsers, where we will define the Web API’s url, that we will use in this post:

[GETLISTUSERS.JS]

import React, { Component } from 'react'

// definition of the Web API's url
const APIUrl = "https://webapidocker.azurewebsites.net/users";

class GetListUsers extends Component {
    render() {
        return (
            <div>
                <h1>List users</h1>
            </div>
        )
    }
}


export default GetListUsers

If we run the application, this will be the result:

Now, we create a Function component called HTMLUserList, where we will define the code to display the list of users:

[HTMLUSERLIST.JS]

import React from 'react'

const HTMLUserList = ({users}) => {
    return (
            <div style = {{width: "100%"}}>
                <table>
                    <thead>
                        <tr>
                            <th>UserName</th>
                            <th>Password</th>
                            <th>Created At</th>
                        </tr>
                    </thead>
                    <tbody>
                    {users.map(user =>
                        <tr key={user.id}>
                            <td>{user.userName}</td>
                            <td>{user.password}</td>
                            <td>{user.createdAt}</td>      
                        </tr>
                    )}
                    </tbody>
                </table>
            </div>
    )
}

export default HTMLUserList;

Then, we add in index.css, the css code used to define the table’s style:

[INDEX.CSS]

.App {
  text-align: center;
}
 
.App-logo {
  height: 40vmin;
  pointer-events: none;
}
 
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}
 
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
 
.App-link {
  color: #61dafb;
}
 
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Finally, we modify the component GetListUsers, in order to fetch data and show the list of users:

[GETLISTUSERS.JS]

import React, { Component } from 'react'
import ViewListUsers from './HTMLUserList';


// definition of the Web API's url
const APIUrl = "https://webapidocker.azurewebsites.net/users44";

class GetListUsers extends Component {
    // definition of variables
    constructor() {
        super();
        this.state = {
          lstUsers: [],
          loading: true,
          error: null,
        };
      }

    // definition of componentDidMount method  
    componentDidMount() {
        fetch(APIUrl)
            // check the response
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    this.setState({ error: 'error', loading: true });
                }
            })
            .then(data => this.setState({ lstUsers: data, loading: false }))
            .catch(error => this.setState({ error: error, loading: false }));
      }

    render() {
        // Using the Destructuring assignment, we define three variables used in the component
        const { lstUsers, loading, error } = this.state;

        // in case of error, component will display an error message
        if (error) {
            return <h1 style = {{color:"white"}}>Attention! There are problems with the Web API.</h1>;
        }

        return (
            <div>
                <h1 style = {{color:"white"}}>List users</h1>
                {loading ? <h2 style = {{color:"white"}}>Loading...</h2>:
                    <ViewListUsers users={lstUsers}/> 
                }
            </div>
        )
    }
}


export default GetListUsers

Now, if we run the application, this will be the result:

React – Fetch data in Class component

Leave a Reply Cancel reply