Welcome folks today in this blog post we will be fetching the data from the jsonplaceholder api in react.js and display it inside the table using jsx. All the full source code of the application is shown below.
Get Started
In order to get started you need to initialize a new react.js project using the below command as shown below
npx create-react-app sampleapp
cd sampleapp
And now we need to write the code inside the App.js file of your react.js project as shown below
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { useEffect, useState } from "react"; function App() { const [data, getData] = useState([]); const URL = "https://jsonplaceholder.typicode.com/posts"; `return ( <div> <h1>How Display API data in Table in React JS</h1> </div> ); } export default App; |
As you can see we are first of all importing the useEffect and useState hooks at the very top of the react.js application. And then we are declaring the state variable which is the actual data array which will actually hold all the results which are coming from the jsonplaceholder api. And then we have the URL variable of JSONPlaceholder where we will be making the requests using the FETCH API.
Initializing the UseEffect Hook
Now guys we will be initializing the useEffect hook and here we will be calling the method which will actually make the http request to the jsonplaceholder api as shown below
|
1 2 3 |
useEffect(() => { fetchData(); }, []);` |
As you can see we have the arrow function and inside it we are calling the fetchData() method and in the arguments we are not providing any dependencies.
And now we need to define this method of fetchData() as shown below
|
1 2 3 4 5 6 7 8 9 |
const fetchData = () => { fetch(URL) .then((res) => res.json()) .then((response) => { console.log(response); getData(response); }); }; |
As you can see we are using the fetch method and passing the url of the api and then the results are returned and first of all we are converting the results to json by calling the json() method and then we are getting the response and then we are setting the state variable of data using the useState hook method of getData and in the argument we are passing the actual returned data.
Rendering Data in JSX Table
Now guys we will be rendering the state variable of data which is actually an array of records coming from jsonplaceholder api. Now in jsx copy paste the below code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div> <h1>How Display API data in Table in React JS</h1> <tbody> <tr> <th>User ID</th> <th>ID</th> <th>Title</th> <th>Descripation</th> </tr> {data.map((item, i) => ( <tr key={i}> <td>{item.userId}</td> <td>{item.id}</td> <td>{item.title}</td> <td>{item.body}</td> </tr> ))} </tbody> </div> |
Full Source Code
Wrapping the blog post. This is the full source code of the App.js file as shown below
App.js
|
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 |
import { useEffect, useState } from "react"; function App() { const [data, getData] = useState([]); const URL = "https://jsonplaceholder.typicode.com/posts"; useEffect(() => { fetchData(); }, []);` const fetchData = () => { fetch(URL) .then((res) => res.json()) .then((response) => { console.log(response); getData(response); }); }; `return ( <div> <h1>How Display API data in Table in React JS</h1> <tbody> <tr> <th>User ID</th> <th>ID</th> <th>Title</th> <th>Descripation</th> </tr> {data.map((item, i) => ( <tr key={i}> <td>{item.userId}</td> <td>{item.id}</td> <td>{item.title}</td> <td>{item.body}</td> </tr> ))} </tbody> </div> ); } export default App; |
Now if you run the react.js app by executing the below command it will display the json data inside the table
npm start
