Getting error in loading table data in react

React
1

for more detaiks regarding this check my post on stackoverflow

image
image1101×415 5.59 KB

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;

2

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

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

3

dhkk
dhkk1355×681 82 KB

4

srge
srge1343×509 12.5 KB

5

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

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

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
image732×471 8.9 KB

6

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

}

7

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!

8

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

9

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

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

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

Thanks for the help!

1 Like
10

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