I am on the Pagination, Filter, and sort section lesson 21. I typed in everything in the lesson. I am confused about why the delete and like buttons won’t render.
TableBody:
import _ from "lodash";
import React, { Component } from "react";
class TableBody extends Component {
renderCell = (item, column) => {
if (column.conetent) return column.content(item);
return _.get(item, column.path);
};
render() {
const { data, columns } = this.props;
return (
<tbody>
{data.map((item) => (
<tr>
{columns.map((column) => (
<td>{this.renderCell(item, column)}</td>
))}
</tr>
))}
</tbody>
);
}
}
export default TableBody;
MovieTable:
import React, { Component } from "react";
import TableBody from "../common/tableBody";
import TableHeader from "../common/tableHeader";
import Like from "../common/like";
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>
),
},
];
raiseSort = (path) => {
const sortColumn = { ...this.props.sortColumn };
if (sortColumn.path === path)
sortColumn.order = sortColumn.order === "asc" ? "desc" : "asc";
else {
sortColumn.path = path;
sortColumn.order = "asc";
}
this.props.onSort(sortColumn);
};
render() {
const { movies, onSort, sortColumn } = this.props;
return (
<table className="table">
<TableHeader
columns={this.columns}
sortColumn={sortColumn}
onSort={onSort}
/>
<TableBody data={movies} columns={this.columns} />
</table>
);
}
}
export default MoviesTable;