Как реализовать сортировку на React js?

Question

[vadimparinov]

Добрый день!Нужно реализовать сортировку товаров как в макете(по разным параметрам)Пока не совсем понимаю как это сделать. Можете подсказать направление куда копать ?

Comments

[Everybody_Lies]

это не сортировка, а фильтрация

[vadimparinov]

Everybody_Lies, ошибся в названии

[n1ksON]

Как реализовать сортировку на React js?

так же как на JavaScript

Answer 1

[wifftees]

Реализуй массив товаров, каждый из которых будет являться объектом, для каждого пропиши к каким критериям он соответствует. Например вот так:

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

Дальше при рендеринге компонента просто запускай фильтрацию по всем товарам(главное вынеси всю логику в отдельный хук)

Comments

[vadimparinov]

У меня примерно так же сейчас это сделано, не могу пока понять логику фильтрации ,

[Kirgus]

vadimparinov, псевдокод:

foreach (let obj in objects)
    if (obj.type == "course") {
        selectedObjects.push(obj)
    }
}
console.log(selectedObjects)

Так работает фильтрация

Answer 2

[marquis_de_eL1fe]

Как уже писал wifftees можно реализовать каждый товар как объект с критериями. Тогда при выборе определенной сортировки в фильтрах необходимо будет всего лишь искать товары с подходящими под фильтр критериями. Например у вас в фильтре выбрано "Видеокурс", следовательно вам нужны товары только с условным

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

внутри объекта.
Пишем функцию сортировки которая принимает на вход весь ваш массив объектов, с помощью например Array.filter() фильтруют по наличию у объекта нужной категории категории, в нашем случае это 'video_course', и отдают обратно готовый отфильтрованный массив.

UPD. Если конкретно про Реакт говорить то просто храним данные которые будем показывать в стейте созданном с помощью useState() и при выборе фильтра просто обновляем наш стейт, в результате чего отображаемые объекты тоже меняются.