Resolved: Vidly Project Getting TypeError: Cannot read property 'map' of undefined

Resolved: forgot to add props columns.

I was creating component tableBody, code is similar to what mosh has shown. Still I am getting the above error.

import React, { Component } from 'react';
import _ from 'lodash';



class TableBody extends 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;

Could you log the data and columns variables to the console so we can see exactly what data and it’s type that the variables are storing ?

console.log(data,map);

Include the above line just below the
const {data, columns}
line and reload the app.

Then on your browser, press Ctrl+Shift+I, select the console tab, and post a screenshot of it here.

Got the problem. Resolved.
I have forgot to add props (columns) to component.
It’s working now

Thanks for helping out

Map is a method that only works with arrays. It means whatever you are chaining with the map method isn’t an array

{_.get(item, column.path)}

i’m getting error in this line

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.

i did everything and follow every step as mosh but unable to find why i’m getting this error

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

I am having the same problem I can’t understand how you solved the problem.
can you please paste your code here?