Пара вопросов о реализации фильтров в Реакте?

Question

[Nikita Shchypylov]

Всем привет, нужно реализовать несколько фильтров таблицы:

1) У меня есть таблица с именами животных. Нужно сделать для каждого животного чекбокс. Если бокс не активен, то скрываем элемент.
Решение : у чекбоксов есть спец атрибут. При клике на чекбокс, мы принимаем его атрибут и всем элементам с таким классом даём display: none?

2) У каждого животного есть цена от 1 до 1000. Нужно фильтровать по цене виджетом-ползунком. То есть, выбираем область цены от и до и фильтруем животных. Это в даже близко не представляю как сделать

Answer 1

[Антон Спирин]

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

GET '/api/v1/animals?page=1&limit=20sort=name&sortDirection=DESC&priceFrom=1000&priceTo=2000'

То что вы хотите реализовать, как минимум, вряд ли найдет применение в реальном приложении.
Учитесь решать реальные задачи.

А трюки с display: none, при возможностяx react вообще можно не использовать.

Даже если пока не можете реализовать сервер с бд и REST API. Правильней будет хранить состояние фильтра в state компонента и выдавать на редер отфильтрованный по параметрам фильтра из state массив с животными. Изменился фильтр - произошел рендер. Вот и вся задача.

Comments

[Nikita Shchypylov]

Дали такое тестовое задание.