import React, { Component } from 'react';
import Like from '../common/like';
import TableHeader from '../common/tableHeader';
import TableBody from '../common/tableBody';

class MoviesTable extends Component {
    columns = [
        {path: 'title', label: 'Title'},
        {path: 'genre.name', label: 'Genre'},
        {path: 'numberInStock', label: 'Stock'},
        {path: 'dailyRentalRate', label: 'Rate'},
        {key: 'Like' ,
         content: movie => (<Like liked={movie.liked} onClick={() => this.props.onLike(movie)}/>)
        },        
        {key: 'Delete',
         content: movie => (<button onClick={() =>this.props.onDelete(movie)} className="btn btn-danger btn-sm">Delete</button>)
        }
    ];
   
    render() { 
        const {movies} = this.props;
        return (
            <table className="table">
                <TableHeader columns = {this.columns} 
                sortColumn = {this.props.sortColumn} 
                onSort = {this.props.onSort} />

                <TableBody 
                data = {movies}
                {...console.log(this.props.data)} />
                
                {/* <tbody>
                   {movies.map(movie =>  <tr key={movie._id}>
                        <td>{movie.title}</td>
                        <td>{movie.genre.name}</td>
                        <td>{movie.numberInStock}</td>
                        <td>{movie.dailyRentalRate}</td>
                        <td>
                           
                        </td>
                        <td></td>
                    </tr>)}
                </tbody> */}
            </table>
        );
    }
}
 
export default MoviesTable;

This is the moviestable.jsx I am using it to render the movies table but then I decided to seperate the table rendering from this component and make a common component

import React, { Component } from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';

class TableBody extends Component {
    renderCell = (item, column) => {
        if(column.content) return column.content(item);
        return _.get(item, column.path);
    };
    state = {  } 
    render() { 
        const {data, columns} = this.props;
        return (
           <tbody>
            {data && data.map((item) =>  (<tr>
               {columns.map((column) => <td>{this.renderCell(item, column)}</td>)} 
            </tr>))}
           
           </tbody>
        );
    }
    
}
TableBody.propTypes = {
    data: PropTypes.array.isRequired,
    columns: PropTypes.array.isRequired
};
 
export default TableBody;

So I made another component tableBody.jsx just to render the table and imported it into the moviesTable. The movies in moviesTable is being fetched from movies component and is of array type .

The error I am facing:-

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at tableBody.jsx:15:1
at Array.map (<anonymous>)
at TableBody.render (tableBody.jsx:14:1)
at finishClassComponent (react-dom.development.js:19781:1)
at updateClassComponent (react-dom.development.js:19727:1)
at beginWork (react-dom.development.js:21650:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27490:1)