Search⌘ K
Home
Courses
The Road to React: The One with Hooks

Solution Review: Reverse Sort

Explore how to build a reverse sorting feature in React by managing sort direction with state and conditional logic. Understand how to toggle between normal and reversed order and apply JavaScript methods for sorting. Learn shorthand object notation and consider component design for sorting state.

We'll cover the following...

Solution

The initial sort direction works for strings, as well as numeric sorts like the reverse sort for JavaScript numbers that arranges them from high to low. Now we need another state to track whether the sort is reversed or normal, to make it more complex:

Node.js
const List = ({ list, onRemoveItem }) => {
  const [sort, setSort] = React.useState({
    sortKey: 'NONE',
    isReverse: false,
  });
  ...
};

Next, give the sort handler logic to see if the incoming sortKey triggers are a normal or reverse ...