CODEWITHSUNDEEP
javascripthtmlreactjs
ANKIT RAWAT
ANKIT RAWAT

Reputation: 15

contents of <td> are not visible

I'm creating a table using react . The th component is being displayed but td is not visible. Also, a warning 'Each child in an array or iterator should have a unique "key" prop.' is being displayed. can someone help me with this?

import React from 'react';
//import pichr from '../imgs/pichr.jpg';
class Dashboard extends React.Component
{
    constructor()
    {
        super();
        this.state={
            heading:[{Width : '50px', Title : 'WorkFlow' }, {Width : '15px', Title : 'Img' }, {Width : '120px', Title : 'DropdownHere'}],
            content:[{WorkFlow : 'Test123', DropdownHere : ['Tota', 'Maina']}, {WorkFlow : 'Test456', DropdownHere : ['Battakh', 'Kauwwa']}]
        }
    }
    
    render()
    {
        return(
            <div>
                <table>
                <tbody>
                    <tr>
                        { this.state.heading.map((obj) => <th style={{width : obj.Width}}>{obj.Title}</th> )}
                    </tr>
                        { this.state.content.map( (obj,i) => {
                                            <tr>
                                                <td>{ obj.WorkFlow }</td>
                                                <td></td>
                                                <td></td>
                                            </tr>

                        })}
                </tbody>
                </table>
            </div>
        )
    }
}
            
export default Dashboard;

Upvotes: 0

Views: 419

Answers (1)

Steven Laidlaw
Steven Laidlaw

Reputation: 450

You’re not actually returning the table row. Add a return in front of the tr tag and you’re good to go.

Edit: or to make it more like the map function above, remove the brackets to have it return directly without needing the keyword.

Upvotes: 1

Related Questions