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

React
1

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;

2

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.

3

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

4

Thanks for helping out

5

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

6
{_.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

7

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

8

I had the same error. I solved this by making this change in moviesTable.jsx:
Line 25 Original : <Tablebody data={movies} />

Line25 Change to:<Tablebody data={movies} columns={this.columns} />

Reason for the error is because columns was not passed to props.
Columns is undefined during map in movieBody.jsx even if

const { data, columns } = this.props  // This is in movieBody.jsx

I think the problem is that props in movieBody.jsx still did not have the columns property so columns is still undefined. With the change in line 25 in movieTables.jsx, this is resolved.

Hope this helps.