Challenge: Sorting

Try sorting in a react app.

We'll cover the following

We’ve covered most of React’s fundamentals, its legacy features, and techniques for maintaining applications. Now it’s time to dive into developing real-world React applications. Each of the following sections will come with a task. Try to tackle these tasks without the optional hints first, but be aware that these are going to be challenging on your first attempt. If you need help, use the optional hints or follow the instructions from the section.


Task

Working with a list of items often includes interactions that make data more approachable by users. So far, every item was listed with each of its properties. To make it explorable, the list should enable sorting of each property by title, author, comments, and points in ascending or descending order. Sorting in only one direction is fine, because sorting in the other direction will be part of the next section.

Optional Hints:

  • Introduce a new sort state in the App or List component.
  • For each property (e.g. title, author, points, num_comments) implement an HTML button which sets the sort state for this property.
  • Use the sort state to apply an appropriate sort function on the list.
  • Using a utility library like Lodash for its sortBy function is encouraged.

Get hands-on with 1200+ tech skills courses.