# Getting error in loading table data in react

**URL:** <https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358>\
**Category:** React\
**Created:** [October 29, 2020, 7:26pm UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358 "2020-10-29T19:26:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![kukabshakiL125](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@kukabshakiL125](https://forum.codewithmosh.com/u/kukabshakiL125)\
**Post date:** [October 29, 2020, 7:26pm UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/1 "2020-10-29T19:26:05Z")

</div>

for more detaiks regarding this check my post on stackoverflow

> <https://stackoverflow.com/questions/64598583/uploading-data-to-table-getting-no-result>

 ![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/1X/644b764baf27ac2bce5e56c49c05198e7901379a.png)  
title and genre are uploading  
rate and stock data is not uploading i have done a console .log where I get the result of stock rate but its not showing here

here is my tablebody code  
import React, { Component } from ‘react’;

import \_ from “lodash”;

class TableBody extends Component {

```
render() {

    const {data,columns} = this.props

    console.log({data,columns})

    return ( <tbody>

        {data.map(item => <tr key={item._id}>

            

        {columns.map(column => <td key={item._id + (column.path || column.key)}>{_.get(console.log(item,column.path))}</td>)} 

        </tr>

        )}

        

    </tbody>

        

    );

}

```

}

export default TableBody;

---

<div class="post-metadata">

**Author:** ![hakuhal](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@hakuhal](https://forum.codewithmosh.com/u/hakuhal)\
**Post date:** [October 30, 2020, 5:13am UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/2 "2020-10-30T05:13:29Z")

</div>

This part seems to be suspicious. I think it may be `_.get(item,column.path)`

> [@kukabshakiL125](#):
>
> `{_.get(console.log(item,column.path))}`

I am not sure without log information. Could you upload your console.log information as well?

---

<div class="post-metadata">

**Author:** ![kukabshakiL125](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@kukabshakiL125](https://forum.codewithmosh.com/u/kukabshakiL125)\
**Post date:** [October 30, 2020, 6:34am UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/3 "2020-10-30T06:34:30Z")

</div>

![dhkk](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/1X/0e6fc5d2dab82203732cf4ed1cf7c4766c4f11b6.png)

---

<div class="post-metadata">

**Author:** ![kukabshakiL125](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@kukabshakiL125](https://forum.codewithmosh.com/u/kukabshakiL125)\
**Post date:** [October 30, 2020, 6:55am UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/4 "2020-10-30T06:55:24Z")

</div>

![srge](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/1X/a0581d09aa04f3c83f09b17d8e45a6b5193a0ee1.png)

---

<div class="post-metadata">

**Author:** ![hakuhal](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@hakuhal](https://forum.codewithmosh.com/u/hakuhal)\
**Post date:** [October 30, 2020, 1:05pm UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/5 "2020-10-30T13:05:41Z")

</div>

Your logs show that props passed the data to tablebody.jsx correctly. The most likely reason is that something went wrong when reading objects properties.

I noticed that your console.log is in line 11. It is from

> [@kukabshakiL125](#):
>
> `{_.get(console.log(item,column.path))}`

console.log return undefined to \_.get(), and \_.get() will return undefined as well. There shoud not be any content in the table right now. 😑

If I debug this code, there must be wrong in rendering column cells. So I will console.log the cell’s content to track it down.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/1X/edce9ed2a626890a714b2ca6440e9753937c2845.png)

---

<div class="post-metadata">

**Author:** ![kukabshakiL125](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@kukabshakiL125](https://forum.codewithmosh.com/u/kukabshakiL125)\
**Post date:** [October 30, 2020, 1:52pm UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/6 "2020-10-30T13:52:35Z")

</div>

solved there is a path mistake which i have given to const =columns{

}

---

<div class="post-metadata">

**Author:** ![SoldierJesus](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@SoldierJesus](https://forum.codewithmosh.com/u/SoldierJesus)\
**Post date:** [November 3, 2020, 12:36pm UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/7 "2020-11-03T12:36:35Z")

</div>

Can you please show what you’ve done? I’m having a hard time with this myself and I’d like to see what you did.

Thanks!

---

<div class="post-metadata">

**Author:** ![kukabshakiL125](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@kukabshakiL125](https://forum.codewithmosh.com/u/kukabshakiL125)\
**Post date:** [November 4, 2020, 7:04am UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/8 "2020-11-04T07:04:33Z")

</div>

you have same problem i have done a spelling mistake in columns array ,columns array have path in path I did spelling mistake  
{ path: “numberInStock”, label: “Stock” },

```
{ path: "dailyRentalRate", label: "Rate" },

```

that’s why I got error

---

<div class="post-metadata">

**Author:** ![SoldierJesus](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@SoldierJesus](https://forum.codewithmosh.com/u/SoldierJesus)\
**Post date:** [November 4, 2020, 11:49am UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/9 "2020-11-04T11:49:50Z")

</div>

I’m actually surprised someone replied (if Im being honest with myself) 🙂

I found the error I had. I didn’t have columns={columns} in the component

```
<TableBody columns={columns} data={data} />

```

Thanks for the help!

---

<div class="post-metadata">

**Author:** ![DrDOMinance](https://avatars.discourse-cdn.com/v4/letter/d/53a042/32.png) [@DrDOMinance](https://forum.codewithmosh.com/u/DrDOMinance)\
**Post date:** [February 9, 2021, 11:19am UTC](https://forum.codewithmosh.com/t/getting-error-in-loading-table-data-in-react/358/10 "2021-02-09T11:19:41Z")

</div>

i’m getting error in tableBody.jsx component.  
while using this line…  
{\_.get(item,column.path)}

Error: Objects are not valid as a React child (found: object with keys {\_id, name}). If you meant to render a collection of children, use an array instead.

for reference this is my stackoverflow post regarding the same topic.

[https://stackoverflow.com/questions/66106451/reactjs-tablebody-jsx-component-error-objects-are-not-valid-as-a-react-child](https://stackoverflow.com/questions/66106451/reactjs-tablebody-jsx-component-error-objects-are-not-valid-as-a-react-child)