React.js row.map is not a function

Question

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

can you console.log(tableData) and show us the result ?

Abslen Char
– Abslen Char

2018-04-22 08:37:55 +00:00
Commented Apr 22, 2018 at 8:37 — Abslen Char
– Abslen Char, Commented Apr 22, 2018 at 8:37
added it to question :)

jj.badweyn
– jj.badweyn

2018-04-22 08:49:57 +00:00
Commented Apr 22, 2018 at 8:49 — jj.badweyn
– jj.badweyn, Commented Apr 22, 2018 at 8:49
this.state.users.lenght -> this.state.users.length

Ben West
– Ben West

2018-04-22 08:52:46 +00:00
Commented Apr 22, 2018 at 8:52 — Ben West
– Ben West, Commented Apr 22, 2018 at 8:52

Ben West · Accepted Answer · 2018-04-22 08:50:33Z

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.

answered Apr 22, 2018 at 8:50

Ben West

4,5861 gold badge19 silver badges17 bronze badges

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

6 Comments

jj.badweyn Over a year ago

Well, i think that i cant remove it :) how can i make tableData as an array? ;)

Ben West Over a year ago

tableData is an array but the first item in it is not. You’re doing tableData.map( row => row.map( ... )) which means every row must be an array as well. But the first row is an object. I can’t say how to change it to an array because I don’t know what it’s for. Why did you decide to put it in the array?

jj.badweyn Over a year ago

Lets say im retrieving usernames from firebase database, i want to put them all to table and make them clickable to retrieve clicked user data, i have read that putting data to array would be the best option to do that :) thanks for your time by the way

Ben West Over a year ago

Try this: instead of var tableData = [{name: this.state.users}] just write var tableData = []. Does it render now? Is anything missing?

jj.badweyn Over a year ago

It displays usernames but in one cel only, also, there are 4 of them in database, while app displays only 3, so one is missing

|

Shubham Khatri · Accepted Answer · 2018-04-22 08:51:05Z

2

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++) {

answered Apr 22, 2018 at 8:51

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

cauchy · Accepted Answer · 2018-04-22 08:56:03Z

2

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

answered Apr 22, 2018 at 8:56

cauchy

1,1431 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

React.js row.map is not a function

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related