rendering nested properties with a table using lodash

I'm trying to display my table head and table body as separate components and dynamically too, with some nested properties (like genre). I use lodash but I get an error with the tBody rendering. I won't mind another means to achieve my goal

data for the table body below

  export const data= [
    {
        _id: "5b21ca3eeb7f6fbccd471815",
        title: "Terminator",
        genre: [{_id: "5b21ca3eeb7f6fbccd471818", name: "Action"}],
        numberInStock: 6,
        dailyRentalRate: 2.5,
        publishDate: "2018-01-03T19:04:28.809z"
        
    },
    {
        _id: "5b21ca3eeb7f6fbccd471819",
        title: "Trip to Italy",
        genre: [{_id: "5b21ca3eeb7f6fbccd471814", name: "Comedy"}],
        numberInStock: 7,
        dailyRentalRate: 3.5,
        publishDate: "2018-01-03T19:04:28.809z"
    },
    
    {
        _id: "5b21ca3eeb7f6fbccd47181b",
        title: "Wedding Crashers",
        genre: [{_id: "5b21ca3eeb7f6fbccd471814", name: "Comedy"}],
        numberInStock: 7,
        dailyRentalRate: 3.5,
        publishDate: "2018-01-03T19:04:28.809z"
    }]

here's columns prop from my parent componentto reduce adding much code

  columns = [
        {path: "title", label: "Title"},
        {path: "genre", label: "Genre"},
        {path: "numberInStock", label: "Stock"},
        {path: "dailyRentalRate", label: "Rate"},
        {
            key: "like",
            content: movie => { <Liked 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>
            }
        }
    ]
     

    import React, { Component } from 'react';
    import _ from 'lodash';
    class TableBody extends Component {
      renderCell = (item, column) => {
        if (column.content) return column.content(item);
    
        return _.get(item, column.path);
      };
    
      render() {
        const { data, columns } = this.props;
    
        return (
          <>
            <tbody>
              {data.map((item) => (
                <tr key={item._id}>
                  {columns.map((column) => (
                    <td key={item._id + (column.path || column.key)}>
                      {this.renderCell(item, column)}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </>
        );
      }
    }
    
    export default TableBody;

I get this error when I try my code

Uncaught 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.

The problem is that genre in your data is an object, which is causing this error.

If you do something like this, it will fix the issue

 renderCell = (item, column) => {
    if (column.content) return column.content(item);

    if(column.path === 'genre') {
      return item.genre[0].name
    }
    return _.get(item, column.path);
  };