React JS - Error Cannot read property 'map' of undefined when rendering a Table

Question

I'm attempting to render a table using ReactJS, but get an error -Cannot read property 'map' of undefined -

The code:

import React, { Component } from 'react';
import './Table.css'

const obj = [{
    name: "onion",
    price: ".99",
    id: 1
}, {
    name: "pepper",
    price: "1.25",
    id: 2
}, {
    name: "broccoli",
    price: "3.00",
    id: 3
}];

class TableRow extends React.Component {
    render() {
        const {
            data
        } = this.props;
        const row = data.map((data) =>
            <tr>
                <td key={data.name}>{data.name}</td>
                <td key={data.id}>{data.id}</td>
                <td key={data.price}>{data.price}</td>
            </tr>
        );
        return (
            <span>{row}</span>
        );
    }
}

class Table extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <table>
                <TableRow data={this.props.data} />
            </table>
        );
    }
}

export default Table;

I imported the table component into the App.js file. However, the error occurs on the following line of Table.js: const row = data.map((data) => ...could I get some assistance please?

could you also share the App.js so that we can see what kind of data type you are passing as a prop to <Table /> component? — Kartal Erkoc
– Kartal Erkoc, Commented Jun 27, 2018 at 13:59
It seems like your data is undefined. Are you sure you are getting the data at the time of the render? — Winter
– Winter, Commented Jun 27, 2018 at 14:00
Where are you giving Table its data prop? Is that data an array? As an aside, data.map((data) => ---) is wrong, you can't define 2 variables with the same name in the same scope — SrThompson
– SrThompson, Commented Jun 27, 2018 at 14:00

Isaac · Accepted Answer · 2018-06-27 14:09:04Z

2

In your table class, change the below code from <TableRow data={this.props.data} /> to <TableRow data={obj} />.

You defined obj but you never use it anywhere. When the program rendering your table class, and trying to render TableRow, it pass data using data prop. But you're passing using this.props.data where you don't have the data for it, and hence when TableRow trying to apply map function it hits exception

answered Jun 27, 2018 at 14:09

Isaac

13k18 gold badges66 silver badges135 bronze badges

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

1 Comment

user1724708 Over a year ago

Thank you, that edit resolved the issue I was encountering; Thanks for the explanation as well.

Thatalent · Accepted Answer · 2018-06-27 14:13:21Z

0

You are most likely not passing an array down into Table as data.

The Table component should be set in App.js or where you're using it like this:

class App extends Component {
  render() {
    return (
      <div className="App">
        <Table data={[1,5,6,etc. . .]} /> \\data has an array of whatever values you care for.
      </div>
    );
  }
}

Afterwards you will also have another problem because you should not be setting data = this.props in TableRow. data should be set to this.props.data like so:

const {
        data
    } = this.props.data;

answered Jun 27, 2018 at 14:13

Thatalent

4242 silver badges8 bronze badges

Collectives™ on Stack Overflow

React JS - Error Cannot read property 'map' of undefined when rendering a Table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related