Search⌘ K

Advanced Sorting: implementing reverse sort

Explore how to implement reverse sorting functionality in React class components by managing boolean state and enhancing the Table component. Understand how to provide clear visual feedback on sorted columns using conditional class names and a utility library. This lesson helps you finalize complex sorting interactions and maintain testing practices.

We'll cover the following...

In the previous lesson, we did some initial ground work to get our search functionality working. In this chapter, we’ll finish the sort functionality with reverse sort. The list should perform a reverse sort once you click a Sort component twice. First, you need to define the reverse state with a boolean. The sort can be either reversed or non-reversed.

Javascript (babel-node)
this.state = {
results: null,
searchKey: '',
searchTerm: DEFAULT_QUERY,
error: null,
isLoading: false,
sortKey: 'NONE',
isSortReverse: false,
};

Now in your sort method, you can evaluate if the list is reverse sorted. It is reverse if the sortKey in the state is the same as ...