How to implement sorting in React js?

Question

JavaScript

Good afternoon! You need to implement the sorting of goods as in the layout (according to different parameters) I don’t quite understand how to do this yet. Can you suggest a direction where to dig?

Answer 1

Implement an array of goods, each of which will be an object, for each write down what criteria it meets. For example like this:

{
  profession: false,
  videoCourse: false,
  any: true,
}

Further, when rendering the component, simply run filtering on all products (the main thing is to put all the logic in a separate hook)

Answer 2

As wifftees already wrote , it is possible to implement each product as an object with criteria. Then, when choosing a specific sorting in the filters, it will only be necessary to search for products with criteria that match the filter. For example, you have "Video course" selected in the filter, so you only need products with a conditional

{
...
category: 'video_course',
...
}

inside the object.
We write a sorting function that takes your entire array of objects as input, using, for example, Array.filter() filter by the presence of the desired category of the category in the object, in our case it is 'video_course', and give back the finished filtered array.
UPD. Speaking specifically about React, we simply store the data that we will show in the state created using useState () and when choosing a filter, we simply update our state, as a result of which the displayed objects also change.