I get this error, when I try to run my code:
TypeError: Cannot read properties of undefined (reading 'map')
Here is my code:
import React, { Component } from "react";
import _ from "lodash";
class TableBody extends React.Component {
render() {
const { data, columns } = this.props;
return (
<tbody>
{data.map((item) => (
<tr>
{columns.map((column) => (
<td>{_.get(item, column.path)}</td>
))}
</tr>
))}
</tbody>
);
}
}
export default TableBody;
if data is something that comes from a remote request it is undefined at the first render, until a response comes. Or maybe you are doing some computation in the parent component in which data is undefined when the component gets render. You can write you code like this:
const { data = [], columns = [] } = this.props;
Which set the values to an empty array if they are undefined.
However be sure that you are passing an array and not something else.