Breaking News: Grepper is joining You.com. Read the official announcement!

react JSON data to display in a table

Disgusted Dormouse answered on October 26, 2020 Popularity 9/10 Helpfulness 4/10

answer react JSON data to display in a table

related display json data in html table react

react JSON data to display in a table

Comment

<tbody>
{
  Object.keys(this.state.birth_details).map(function (element) {
    return (
      <tr key={element}>
        <td>{element}</td>
        <td>{this.state.birth_details[element]}</td>
      </tr>
    );
  })
}
</tbody>

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: display javascript json

Link to this answer
Share Copy Link

Contributed on Oct 26 2020

Disgusted Dormouse

0 Answers Avg Quality 2/10

Closely Related Answers

display json data in html table react

Comment

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;

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: developmobileapplications.com

Tags: html-table h

Link to this answer
Share Copy Link

Contributed on Jun 02 2022

anjani varma

0 Answers Avg Quality 2/10

react JSON data to display in a table

Contents

More Related Answers

react JSON data to display in a table

Closely Related Answers

display json data in html table react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.