Objects are not valid as a React child use an array instead - reactjs

Question

I'm getting "Objects are not valid as a React child" on this block:
<table className="table">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Genre</th>
<th scope="col">Stock</th>
<th scope="col">Rate</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{movies.filter(movie => (
<tr key={movie._id}>
<td>{movie.title}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td>
<Like
onClick={() => this.handleLike(movie)}
liked={movie.liked}
/>
</td>
<td>
<button
onClick={() => this.handleDelete(movie._id)}
className="btn btn-danger m-2"
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
The exact error message reads: Error: Objects are not valid as a React child (found: object with keys {_id, title, genre, numberInStock, dailyRentalRate, publishDate, liked}). If you meant to render a collection of children, use an array instead.
No matter what I do to troubleshoot this the error won't go away. Can anyone explain ?

Answer 1

This:
<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>
<Like
onClick={() => this.handleLike(movie)}
liked={movie.liked}
/>
</td>
<td>
<button
onClick={() => this.handleDelete(movie._id)}
className="btn btn-danger m-2"
>
Delete
</button>
</td>
</tr>
))}
</tbody>
Should look like this:
<tbody>
<MovieComponent
movie={movie}
likeOnCLick={this.handleLike(movie)}
/>
</tbody>
You're not filtering anything, so just use map(), and pass the results into a React.Component that you define elsewhere.

Answer 2

The filter method is used to select certain items of an array. It seems that you have confused this with the map method, which should work in this scenario.
filter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map