How to fix "TypeError: Cannot read property 'map' of undefined" in JavaScript?

Question

I am fetching data from API and then mapping it to render into a table. But the fetching is not working and the state stays undefined when the page is loaded. Though the API is working fine and sending the data properly, I checked it both on Postman and my browser. How to solve this issue?

The page was crashing and I Googled a bit and added conditional rendering to stop it from crashing. But still cannot solve the issue with fetching data and mapping it.

Here is the code for the page that's not working:

import React, { Component } from "react";
import fetch from "isomorphic-unfetch";

export default class extends Component {
  static async getInitialProps() {
    const res = await fetch("https://linktoapi/path");
    const studentData = await res.json();
    return studentData;
  }
  componentWillMount() {
    this.setState({
      studentData: this.props.studentData
    });
  }

  render() {
    return (
      <table className="table is-striped is-fullwidth has-text-centered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Section</th>
            <th>Batch</th>
            <th>Contact No.</th>
          </tr>
        </thead>
        <tbody>
          {this.state.studentData && this.state.studentData.map(studentDataRow => (
            <tr id={studentDataRow._id}>
              <td>{studentDataRow.name}</td>
              <td>{studentDataRow.class}</td>
              <td>{studentDataRow.section}</td>
              <td>{studentDataRow.batch}</td>
              <td>{studentDataRow.contact_no}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

Here is the data from API:

[{"_id":"5d0cd67416c3a60017608a48","type":"student","name":"Samnan","contact_no":"9999","class":"123","section":"av","batch":"2002","__v":0},
{"_id":"5d0d1a7bfe72ac001775d778","type":"student","name":"as","contact_no":"0","class":"d","section":"r","batch":"a","__v":0},
{"_id":"5d0d1b24fe72ac001775d779","type":"student","name":"ab","contact_no":"0","class":"d","section":"afrgr","batch":"adsda","__v":0},
{"_id":"5d0d1b58259c5d6cd69acf3b","type":"student","name":"akash","contact_no":"567","class":"23","section":"h","batch":"2012","__v":0},
{"_id":"5d0ea1eb91eac20017f36739","type":"student","name":"as","contact_no":"08109209","class":"v","section":"qere","batch":"re","__v":0}]

To reproduce this issue locally:

git clone https://github.com/Geektrovert/EduSys.git && cd EduSys
npm i
npm run dev

and then go to http://localhost:3000/students

Have not tested but: id={studentDataRow.id_} you have a typo there. Should be id={studentDataRow._id)}. — Oli
– Oli, Commented Jun 23, 2019 at 15:51

Oflocet · Accepted Answer · 2019-06-23 16:05:15Z

2

I changed a few things to get it to run. getInitialProps didn't seem to be called. I moved your API call in componentDidMount and use the state to store the student data.

import React, { Component } from "react";
import fetch from "isomorphic-unfetch";

export default class extends Component {

  constructor(props) {
    super(props);

    this.state = {
      studentData: []
    };
  }

  async componentDidMount() {
    const res = await fetch("https://edusys-yas.herokuapp.com/api/students");
    const studentData = await res.json();

    this.setState({ studentData });
  }
  render() {
    return (
      <table className="table is-striped is-narrow is-fullwidth">
        <thead>
          <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Section</th>
            <th>Batch</th>
            <th>Contact No.</th>
          </tr>
        </thead>
        <tbody>
          {this.state.studentData.map(studentDataRow => (
            <tr>
              <td>{studentDataRow.name}</td>
              <td>{studentDataRow.class}</td>
              <td>{studentDataRow.section}</td>
              <td>{studentDataRow.batch}</td>
              <td>{studentDataRow.contact_no}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

result

answered Jun 23, 2019 at 16:05

Oflocet

5663 gold badges9 silver badges19 bronze badges

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

3 Comments

Oli Over a year ago

NextJS Docs > getInitialProps can not be used in children components. Only in pages.

Oli Over a year ago

This approach works but is not returned from the SSR, only CSR. If that's an issue for you, move the getInitialProps to the students.js page, and pass it down to the StudentTable.js as a prop.

Samnan Rahee Over a year ago

thanks for the information, i'll keep these in mind @Oli

Collectives™ on Stack Overflow

How to fix "TypeError: Cannot read property 'map' of undefined" in JavaScript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related