Map loop in JSX to generate dynamic table headers in React

Question

I am trying to generate dynamic table headers. I have a tableHeader state which is an array that contains all the various headers I need for my table. I have commented out the output under the console log so you can see the structure. Why is it that I get a cannot read property 'map' of undefined when I am just looping through my table in JSX to return one <TableHeader> per element in the array.

import React, {Component, Fragment} from 'react'
import styled, {ThemeProvider, css } from 'styled-components'
import tableData from '../../Data/TableData'

const TableWrapper = styled.div `
    overflow-x: scroll;
    margin: 20px 0;
`

const TableContainer = styled.table`
    height:auto;
    width: 100%;
`
const TableRow = styled.tr`
    background-color: #ccc;
    &:nth-child(even){
        background: red;
    }
`
const TableHeader = styled.th`
    font-size: 20px;
`
const TableCell = styled.td `
    font-size: 14px;
    padding: 10px;
`
class Table extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            tableHeader: this.getHeader()
        }
    }

    getHeader() {
        let tableHeader = [];
        tableData.map((item, key) =>
            tableHeader.push(Object.keys(item))
        );
        tableHeader.splice(1);
        return tableHeader;
    }

    render() {
        console.log(this.state.tableHeader);
        // Array(13)]
        //     0: Array(13)
        //     0: "_id"
        //     1: "index"
        //     2: "guid"
        //     3: "isActive"
        //     4: "balance"
        //     5: "picture"
        //     6: "age"
        //     7: "eyeColor"
        //     8: "name"
        //     9: "gender"
        //     10: "company"
        //     11: "email"
        //     12: "phone"
        return(
            <TableWrapper>
                <TableContainer>
                    <TableRow>
                        {this.state.tableHeader.items.map((item, index) => (
                            <TableHeader key={index}>{item}</TableHeader>
                        ))} 
                    </TableRow>
                    <TableRow>
                        <TableCell>Jill</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell>Eve</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell>Eve</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell>Eve</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                        <TableCell>Smith</TableCell>
                        <TableCell>50</TableCell>
                    </TableRow>
                </TableContainer>
            </TableWrapper>
        )
    }

}

export default Table

tableData.js

const tableData = [
{
  "_id": "5dc24ef327e457952f855187",
  "index": 0,
  "guid": "f260f5e0-31a3-40ce-af20-112f84b53c9b",
  "isActive": false,
  "balance": "$1,535.45",
  "picture": "http://placehold.it/32x32",
  "age": 37,
  "eyeColor": "blue",
  "name": "Trisha Hubbard",
  "gender": "female",
  "company": "GEEKMOSIS",
  "email": "[email protected]",
  "phone": "+1 (816) 499-3746"
},
{
  "_id": "5dc24ef3c4623fd3c48b9b5d",
  "index": 1,
  "guid": "60818df4-942e-4a54-b220-9e3d3b478329",
  "isActive": true,
  "balance": "$3,295.32",
  "picture": "http://placehold.it/32x32",
  "age": 36,
  "eyeColor": "green",
  "name": "Augusta Garrison",
  "gender": "female",
  "company": "ZAGGLES",
  "email": "[email protected]",
  "phone": "+1 (901) 596-3999"
},
{
  "_id": "5dc24ef304c623dd70274902",
  "index": 2,
  "guid": "620c1194-7c5f-4098-8a99-ba6d9a7f353e",
  "isActive": true,
  "balance": "$1,248.53",
  "picture": "http://placehold.it/32x32",
  "age": 37,
  "eyeColor": "green",
  "name": "Ebony Morales",
  "gender": "female",
  "company": "REALYSIS",
  "email": "[email protected]",
  "phone": "+1 (860) 441-3757"
},
{
  "_id": "5dc24ef3ec1d0af18b532e23",
  "index": 3,
  "guid": "3d177090-79a3-4568-a05f-4936f6efd189",
  "isActive": true,
  "balance": "$1,929.51",
  "picture": "http://placehold.it/32x32",
  "age": 37,
  "eyeColor": "blue",
  "name": "Sullivan Stanley",
  "gender": "male",
  "company": "OVERPLEX",
  "email": "[email protected]",
  "phone": "+1 (821) 552-3375"
},
{
  "_id": "5dc24ef3a93531da7d213398",
  "index": 4,
  "guid": "7e06af9e-0889-4471-ada6-a02d58e540c1",
  "isActive": false,
  "balance": "$1,237.16",
  "picture": "http://placehold.it/32x32",
  "age": 24,
  "eyeColor": "green",
  "name": "Anthony Saunders",
  "gender": "male",
  "company": "GONKLE",
  "email": "[email protected]",
  "phone": "+1 (942) 509-3515"
},
{
  "_id": "5dc24ef3947391fc096af389",
  "index": 5,
  "guid": "d4cd76c8-45d8-44b6-a3d4-73c3f3cdc589",
  "isActive": false,
  "balance": "$2,672.64",
  "picture": "http://placehold.it/32x32",
  "age": 20,
  "eyeColor": "green",
  "name": "Kenya Reynolds",
  "gender": "female",
  "company": "CINCYR",
  "email": "[email protected]",
  "phone": "+1 (869) 470-3907"
},
{
  "_id": "5dc24ef3ad9affae7772bb23",
  "index": 6,
  "guid": "585faf0e-9758-4f6a-b123-6f4acd350688",
  "isActive": false,
  "balance": "$3,203.46",
  "picture": "http://placehold.it/32x32",
  "age": 27,
  "eyeColor": "blue",
  "name": "Becky Carter",
  "gender": "female",
  "company": "ZANYMAX",
  "email": "[email protected]",
  "phone": "+1 (973) 444-3386"
}
]

export default tableData;

What are you returning from tableData component? It doesn't seem to be an array. Can you add the code? — Nicolas Hevia
– Nicolas Hevia, Commented Nov 6, 2019 at 5:45
Well I can see 2 places you're using .map, so first thing is to find which of those is causing the error — Jayce444
– Jayce444, Commented Nov 6, 2019 at 5:47
@Jayce444 The first map seems to be working as its returning that array that i need with only the key of the objects which will be become the headers of my table — Kiwimoisi
– Kiwimoisi, Commented Nov 6, 2019 at 5:49
@Kiwimoisi unless I'm mistaken, it looks like you're logging this.state.tableHeader and that is printing an array. But then you're trying to .map over this.state.tableHeader.items, which will be undefined since you're trying to access the items property of an array. Shouldn't you just be mapping over this.state.tableHeader? — Jayce444
– Jayce444, Commented Nov 6, 2019 at 5:51

Nicolas Hevia · Accepted Answer · 2019-11-06 06:16:50Z

3

Remove .items iteration from this.state.tableHeader.items.map

Like this:

<TableRow>
  {this.state.tableHeader.map((item, index) => (
  <TableHeader key={index}>{item}</TableHeader>
))}

Edit

You need to fix your getHeader() function in order to use them later with the dynamic th loading:

getHeader() {
  let tableHeader = [];
  tableData.map((item, key) => tableHeader.push(Object.keys(item)));
  return tableHeader[0];
}

edited Nov 6, 2019 at 6:16

answered Nov 6, 2019 at 5:53

Nicolas Hevia

16k4 gold badges24 silver badges32 bronze badges

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

3 Comments

Kiwimoisi Over a year ago

Hi, this is the right answer it does fix the error. Although, why does it then just return one single TableHeader div with every single item in it ? Shouldn't it be creating 1 tableHeader per item in the array ?

Nicolas Hevia Over a year ago

You are using splice in a way that it isn't helping you achieve what you want. I've edited my answer with a fix.

Kiwimoisi Over a year ago

I realised that I had an array in an array ! thanks for helping out !

Collectives™ on Stack Overflow

Map loop in JSX to generate dynamic table headers in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related