API call in React JS
API integration is the most important part of the React JS application. So today we will show you how to fetch data via API call in React JS.
How to consume a RESTful API in React, Fetching API Data with React.JS, Consuming REST APIs With React.js, Introduction to API Calls With React and Axios, React API Call example, reactjs api call example.
Way to fetch data using API call in React JS
- Create startup react app
- Use fetch to make API call
- Output
1. Create startup react application
First you have to create react application. Please refer below link to create startup app.
https://www.cluemediator.com/create-react-application2. Use fetch to make API call
Step 1: Add below bootstrap css link in index.html to use bootstrap design in application.
1 2 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> |
Step 2: Use fetch method to make API calls and set data into the react state. You have to define state variable for it and bind method in constructor.
Find more details to handle events in React JS.
https://www.cluemediator.com/handle-events-react1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | constructor(props) { super(props); this.state = { userList: [], loading: false } this.getUserList = this.getUserList.bind(this); } getUserList() { this.setState({ loading: true }); fetch('https://reqres.in/api/users') .then(res => res.json()) .then(res => { setTimeout(() => { this.setState({ loading: false, userList: res.data }); }, 2000); }) } |
Here we used loading variable to indicate API call is ongoing. For understanding purpose, we used setTimeout after getting API response so we can get the idea of loading.
Step 3: Add button and table to manage API call on button click and display fetched data into the table.
We will call getUserList method on button click event. To manage button text and disabled attribute via loading state variable.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | render() { const { userList, loading } = this.state; return ( <div className="container App"> <h4 className="d-inline-block">Clue Mediator</h4> <button className="btn btn-info float-right" onClick={this.getUserList} disabled={loading}>{loading ? 'Loading...' : 'Get User List'}</button> <div className="clearfix"></div> <table class="table mt-3"> <thead class="thead-dark"> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Avatar</th> </thead> <tbody> {userList.map(x => <tr> <td>{x.first_name}</td> <td>{x.last_name}</td> <td>{x.email}</td> <td><img src={x.avatar} width="50" height="50" /></td> </tr>)} {userList.length == 0 && <tr> <td className="text-center" colSpan="4"> <b>No data found to display.</b> </td> </tr>} </tbody> </table> </div> ); } |
Now, iterate the userList to display records in table and also use image attribute to display as avatar.
3. Output
