Create table with table heading using json in react

Question

I am trying to fetch JSON data and create a table using it with table heading. I've done it successfully but the problem is that the table is not displayed properly.

render(){
    return(
        <div className='container'>
            <table>
                <thead>
                    <tr>
                        <th>User_Name</th>
                        <th>Address</th>
                        <th>Date Of Birth</th>
                        <th>Email</th>
                        <th>Profile Picture</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.arr.map((card)=>{
                        return(
                        <div>
                            <tr>
                                <td>{card.user_name}</td>
                                <td>{card.address}</td>
                                <td>{card.date_of_birth}</td>
                                <td>{card.email}</td>
                                <td>{card.profile_picture}</td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
                            </tr>
                        </div>
                    ) })}
                </tbody>
             </table>

and the table looks like this :

https://screenshots.firefox.com/7i07VlkEFYlAj8ga/mrigank.com

I want the table to be properly arranged.

Vikas Singh · Accepted Answer · 2019-05-13 06:44:42Z

1

when you are mapping your data and returning it into <tr>, <td> Remove <div> while populating the table, because div can not be the child of table.

answered May 13, 2019 at 6:44

Vikas Singh

1,8651 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kaklikyan · Accepted Answer · 2019-05-13 06:45:38Z

1

Try to remove div element from tbody.

answered May 13, 2019 at 6:45

Kaklikyan

966 bronze badges

Comments

score 0 · Accepted Answer · 2019-05-13 06:54:10Z

0

<div> is not allowed as an immediate child of any of the table elements (except <th>, <td> and <caption>) and will automatically be moved outside of the element with all of its content.

Try removing the <div> elements around your <tr> elements.

edited May 13, 2019 at 6:54

answered May 13, 2019 at 6:47

user6612182

Comments

Bilal Mubeen · Accepted Answer · 2019-05-13 06:56:28Z

0

Add this to the table tag <table style="width:100%"> It will also work.

Or if you want to an absolute table styling use Bootstrap for it so it will be responsive. Here is the link of tables for bootstrap

Also remove the <div> tag as it is not recommneded for the table body, But it will work fine.

answered May 13, 2019 at 6:56

Bilal Mubeen

316 bronze badges

Comments

Badri Chorapalli · Accepted Answer · 2019-05-13 07:03:25Z

Modified your code for displaying table properly.

 <tbody>
                        {this.state.arr.map((card)=>{
                            return(

                                <tr>
                                    <td>{card.user_name}</td>
                                    <td>{card.address}</td>
                                    <td>{card.date_of_birth}</td>
                                    <td>{card.email}</td>
                                    <td>{card.profile_picture}</td>
                                    <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
                                    <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
                                </tr>

                        ) })}
                    </tbody>

Collectives™ on Stack Overflow

Create table with table heading using json in react

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related