Hello, I am building a dummy video rental web page. This is what it looks like:
I am able to sort each of the cols in asc order. Now I am trying to implement the descending order. Here are all my relevant pieces of code:
Parent component: movies.jsx
handleSort = path => {
const sortColumn = { ...this.state.sortColumn };
if (sortColumn.path === path) {
sortColumn.order = sortColumn.order === "asc" ? "desc" : "asc";
} else {
sortColumn.path = path;
sortColumn.order = "asc";
}
this.setState({ sortColumn });
};
In render():
<MoviesTable
movies={movies}
onLike={this.handleLike}
onDelete={this.handleDelete}
onSort={this.handleSort}
/>
In Child component:
const MoviesTable = props => {
const { movies, onDelete, onLike, onSort } = props;
return (
<table className="table">
<thead>
<tr>
<th
onClick={() => {
onSort("title");
}}
>
Title
</th>
<th
onClick={() => {
onSort("genre.name");
}}
>
Genre
</th>
<th
onClick={() => {
onSort("numberInStock");
}}
>
Stock
</th>
<th
onClick={() => {
onSort("dailyRentalRate");
}}
>
Rate
</th>
<th />
<th />
</tr>
</thead>
<tbody>
other code
</tbody>
</table>
);
};
export default MoviesTable;
Any ideas what I’m doing wrong?
Also if there are better ways to share my code, please let me know. (Preferably something besides CodePen but I’ll copy it there if needed).
Thank you.