Hello There In order to Display Dummy API data in table form using react js you have knowledge about HTML tags like tboday, tr, th, td. For get the data from API we are using Fetch API using After Fetching data using REST API we have to display json data in tabular form in our Web Browser So In the task We are going Display Data in table form using html and css Below are the steps mentionedn to complete the task Step:-1 Create new react app using Step:-2 HTTP Request & Response Step:-3 Now Store data in UI elements Step:-4 complete code
REST API
npx create-react-app apidataintableform
data from the JSON placeholder site which gives us a demo API. If you want to call your own API then that is also ok. Just you need to make some changes according to your response.
The fetch() function is as shown belowconst fetchData = () => {
fetch(URL)
.then((res) =>
res.json())
.then((response) => {
console.log(response);
getData(response);
})
}
<tbody>
<tr>
<th>User Id</th>
<th>Id</th>
<th>Title</th>
<th>Description</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>
import logo from "./logo.svg";
import "./App.css";
import "./table.css";
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;
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)