TypeError: userData.map is not a function even though userData is an array

Question

I am quite new to react and trying to fetch data from a .json file (called userData.json), but .map is not working even though userData is an array.

I already checked this by doing

 console.log(Array.isArray(userData));
console.log(typeof userData);

and it's giving back 'true' and 'object'.

Any idea what I am doing wrong? Here is the whole code snipped:

import React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

class JsonTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userData: [],
      error: undefined
    };
  }
  componentDidMount() {
    fetch("../data/userData.json").then(
      result => {
        this.setState({
          userData: result
        });
      },
      error => {
        this.setState({ error });
      }
    );
  }
  render() {
    const { userData } = this.state;
    console.log(Array.isArray(userData));
    console.log(typeof userData);
    return (
      <Paper>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell>Foto</TableCell>
              <TableCell>Kategorie</TableCell>
              <TableCell>Kontaktinformation</TableCell>
              <TableCell>Job</TableCell>
              <TableCell>Notiz</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {userData.map(row => {
              return (
                <TableRow key={row.id}>
                  <TableCell component="th" scope="row">
                    {row.name}
                  </TableCell>
                  <TableCell>{row.image}</TableCell>
                  <TableCell>{row.category}</TableCell>
                  <TableCell>{row.contactInfo}</TableCell>
                  <TableCell>{row.job}</TableCell>
                  <TableCell>{row.note}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Paper>
    );
  }
}

export default JsonTable;

Haven't used fetch in my life, however apparently, you are fetching json. Shouldn't you use some `.json()` method to convert json to an array? — kind user, Dec 08 '18 at 13:06

score 1 · Accepted Answer · answered Dec 08 '18 at 13:08

but .map is not working even though userData is an array.

No. render() gets called two times. At the first time, the initial state gets rendered, userData is an empty array and you come to the conclusion that userData is an array. This time, mapping won't fail. Now the data gets fetched, and you call setState with userData being a response object (thats what fetch() resolves to), this time, Array.isArray will return false (but you somehow haven't seen that), and .map doesnt exist.

To parse the result of the fetch call and get an array, use .json():

 fetch("../data/userData.json")
   .then(res => res.json())
   .then(result => /*...*/)

kind user · Answer 2 · 2018-12-08T13:10:41.380

1

Haven't you forgot to extract thejson body?

fetch("../data/userData.json")
  .then(
     (result) => result.json()
  )
     .then((userData) => {
        this.setState({
           userData,
        });
     })

Another thing - just in case - I would secure the possibiity that userData is not an array.

{Array.isArray(userData) && userData.map(row => { ... } }

edited Dec 08 '18 at 13:10

answered Dec 08 '18 at 13:09

kind user

40,029
7
67
77

`json()` returns a promise? – Jonas Wilms Dec 08 '18 at 13:10
@JonasWilms Yep, you're right. Forgot about the second `then`. – kind user Dec 08 '18 at 13:13
About the second part: I would rather make that `setState` neber gets called with a non array `userData`. – Jonas Wilms Dec 08 '18 at 13:14
@JonasWilms That's rather a hint, for posterity – kind user Dec 08 '18 at 13:17

TypeError: userData.map is not a function even though userData is an array

2 Answers2