i have a problem with creating react table, acctualy i have this code

render() {
    var tableData = [
      {name: this.state.users}
    ];
    var tableRow = [];
     for(var x = 1; x <= this.state.users.lenght; x++) {
    tableRow.push(this.state.users[x]);
    if (x % 4 == 0) {
        tableData.push(tableRow);
        tableRow = [];
    }
}

    return (
        <Table1>
        {tableData.map((row, index) => {
            return (
                <tr key={row + index}>
                    {row.map((cell, index) => {
                        return (
                            <td key={"cell_" + index}>{cell}</td>
                        );
                    })}
                </tr>
            );
        })}
   </Table1>

in my tableData i have some firebase data which is retrieved properly, but i have a problem with placing it to table cell, actually with this table code i got an error "TypeError: row.map is not a function" How can i solve that? Thanks :)

edit: added console.log for tableData

i have a problem with creating react table, acctualy i have this code

render() {
    var tableData = [
      {name: this.state.users}
    ];
    var tableRow = [];
     for(var x = 1; x <= this.state.users.lenght; x++) {
    tableRow.push(this.state.users[x]);
    if (x % 4 == 0) {
        tableData.push(tableRow);
        tableRow = [];
    }
}

    return (
        <Table1>
        {tableData.map((row, index) => {
            return (
                <tr key={row + index}>
                    {row.map((cell, index) => {
                        return (
                            <td key={"cell_" + index}>{cell}</td>
                        );
                    })}
                </tr>
            );
        })}
   </Table1>

in my tableData i have some firebase data which is retrieved properly, but i have a problem with placing it to table cell, actually with this table code i got an error "TypeError: row.map is not a function" How can i solve that? Thanks :)

edit: added console.log for tableData

• javascript
• reactjs

• can you console.log(tableData) and show us the result ? – Abslen Char Commented Apr 22, 2018 at 8:37
• added it to question :) – jj.badweyn Commented Apr 22, 2018 at 8:49
• this.state.users.lenght -> this.state.users.length – Ben West Commented Apr 22, 2018 at 8:52

3 Answers 3

.map is a method of Arrays, and tableData[0] isn’t an Array, it’s an Object ({name: this.state.users}). It’s not clear what that’s doing in there, maybe you can remove it? tableData[1] onwards will all be Arrays and should render correctly.

Firstly, tableData contains the first value as {name: this.state.users} which isn't an array and hence row.map will fail.

Secondly, there is a typo in length

for(var x = 1; x <= this.state.users.length; x++) {

.map is available only on Arrays and in your case row is not also arrays (tableData[0] is not array).