Afficher les données JSON dans la table HTML REACT
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
import React, { useState, useEffect } from 'react';
import '../tabledata.css';
function TableData() {
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 (
<>
<h1>How to display JSON data to table in React JS</h1>
<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>
</>
);
}
export default TableData;
anjani varma
