React http Get Request Example

Hello Friends,

This article will provide some of the most important example how to send http request in react js. i would like to show you react native http request. step by step explain react api get request example. i explained simply step by step react js rest api get example.

You must have to call api in componentDidMount() method beacuse of our html will call before this method. First you have to define users state then fire api using fetch function. we are store API data into users state. then we are display data using map function.

React js Get Request API Example

/src/App.js file

import React from 'react';
import './App.css';
import UserGetApi from './UserGetApi';

function App() {
  return (
    <div>
      
        <UserGetApi />

    </div>
  );
}

export default App;

/src/UserGetApi.js file

import React from 'react'

class UserGetApi extends React.Component{

    constructor(){
        super();
        this.state = {
            users:null
        }
    }

    componentDidMount(){
        fetch('http://jsonplaceholder.typicode.com/users').then((res)=>{
            res.json().then((result)=>{
                console.warn(result);
                this.setState({users:result})
            })
        })
    }    

    render(){
        return(
            <div>
                <div class="row">
                    <div class="col-md-6 offset-md-3">
                        <br /><br />
                        <h3>Get User List Using API</h3><br />
                        <table class="table table-bordered">
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>City</th>
                            </tr>
                        {
                            this.state.users ?
                                
                                    this.state.users.map((user,i)=>
                                        <tr>
                                            <td>{++i}</td>
                                            <td>{user.name}</td>
                                            <td>{user.email}</td>
                                            <td>{user.address.city}</td>
                                        </tr>
                                    )
                            :
                            null
                        }
                        </table>
                    </div>
                </div>
            </div>
        )  
    }
}

export default UserGetApi;

I hope it can help you...