API calls with React Hooks
In this article, we will show you how to make API calls with React Hooks. We will use useState hooks to make it working with functional component.
How to consume a RESTful API with React Hooks, Fetching API Data with React.JS, Consuming REST APIs With React Hooks, Introduction to API Calls With React and Axios, React Hooks API Call example.
Way to fetch data using API call with React Hooks
- Create startup react app with React Hooks
- Integrate HTML and make API call
- Output
1. Create startup react app with React Hooks
First you have to create react application. Please refer below link to create startup app.
Create React ApplicationI would recommend you to check the previous article about the API call in React JS for more understanding. We have implemented the same things using class component.
Your startup structure should look like below.
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; import './App.css'; function App() { return ( <div className="container App"> <h4>Clue Mediator</h4> </div> ); } export default App; |
2. Integrate HTML and 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 state to manage API response and display data using hooks.
For that we will use “useState” to manage state in functional component.
Add below code in App function. Here we used two variables, one for data list and another one for API loading.
1 2 | const [userList, setUserList] = useState([]); const [loading, setLoading] = useState(false); |
Step 3: Create function to make API call
Here we will create function to make API call and store result in state.
1 2 3 4 5 6 7 8 9 | const getUserList = () => { setLoading(true); fetch('https://reqres.in/api/users') .then(res => res.json()) .then(res => { setUserList(res.data); setLoading(false); }); } |
Step 4: Create HTML design to display API records in table structure.
We follow the same design as previous article API call in React JS. Just we have updated the syntax of the state variables.
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 36 | return ( <div className="container App"> <h4 className="d-inline-block">Clue Mediator</h4> <button className="btn btn-info float-right" onClick={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> ); |
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | import React, { useState } from 'react'; import './App.css'; function App() { const [userList, setUserList] = useState([]); const [loading, setLoading] = useState(false); const getUserList = () => { setLoading(true); fetch('https://reqres.in/api/users') .then(res => res.json()) .then(res => { setUserList(res.data); setLoading(false); }); } return ( <div className="container App"> <h4 className="d-inline-block">Clue Mediator</h4> <button className="btn btn-info float-right" onClick={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> ); } export default App; |
How to get google review data by hooks
Have you tried the Google Business API?