Help with React - trying to reverse order of a column

JavaScript
1

Hello, I am building a dummy video rental web page. This is what it looks like:

Capture
Capture1886Ă—1005 78.9 KB
.

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.

2

Can’t see anything obviously wrong. Share your code on codesandbox.io

3

Please review here: https://codesandbox.io/s/qv24vj3lm6?fontsize=14

Note: I must have uploaded wrong version of font-awesome therefore the “heart” icons not showing up properly. Will fix ASAP!

In the meantime, how to recreate error:

  1. Click on any column heading to sort in ascending order (first col, Title, always sorted in asc order as default setting upon page load).
  2. Then click on the same col heading to sort in descending order.
  3. Expected: all values in col should sort in descending order. Actual: nothing happens.

Thank you.

4

Change line 88, the way you’re passing your _.orderBy parameters is a little off:

    const sorted = _.orderBy(filtered, [sortColumn.path], [sortColumn.order]);

The second parameter is an array of columns to sort by, but the third separate parameter is the order of each column.

This is it working, and that’s the only line I modified. https://codesandbox.io/s/p96548646x

3 Likes
5

Thank you @snowmonkey! Argh - I reviewed the code for so long but kept missing that typo!!

6

It’s easy to get hung up when you’ve been looking at it a while. Sometimes fresh eyes are a thing.

Very very well done though, that’s some mighty clean code you got going on. You’ve come a long way since the first time I saw your posts. :wink:

1 Like
7

Thanks, but I can’t take all the credit. I’ve had some help.