@Vladislav6

Как отсортировать при помощи Select?

Есть задача, сделать сортировку карточек с помощью select и внутри лежащих option.
Проект строю на реакте.

Так вот вопрос, как сделать сортировку карточек по алфавиту с выбором соответствующего option?

Код селекта:
<select className="sort-select"> 
     <option className="option-item">Популярности</option>
      <option className="option-item">По цене</option>
       <option className="option-item">По алфавиту</option>
</select>


Тут стейт в котором копия оригинального стейта(есть уже кнопки-фильтры)
const [filtered, setFiltered] = useState([])

Данные идут с сервера и имееют следующий вид:

{
    "items" : [
        {
            "id" : 1,
            "name": "Колбаски Барбекю",
            "img": "ссылка на фотохост",
            "pizza": true,
            "drink": false,
            "snacks": false,
            "new": true,
            "meat": true,
            "spicy": true
        },
        {
            "name": "Двойной цыпленок",
            "img": "ссылка на фотохост",
            "pizza": true,
            "drink": false,
            "snacks": false,
            "new": true,
            "meat": true,
            "spicy": false
        }, ...

Мне нужно сортировать по полю name, если я правильно понимаю, однако при вызове метода sort() ничего не происходит и какой-либо option не реагирует на консоль при его выборе (первый раз работаю с select and option).

Помогите разобраться с этой сортировкой.
  • Вопрос задан
  • 1106 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Описываете варианты сортировки - имя свойства плюс его тип:

const sortOptions = [
  { key: '...', type: '...' },
  { key: '...', type: '...' },
  ...
];

Делаете функции сортировки, кладёте их в объект, ключами будут имена типов данных (значения свойства type из массива sortOptions):

const sortFunctions = {
  type1: (a, b) => ...,
  type2: (a, b) => ...,
  ...
};

На основе массива с вариантами сортировки собираете select:

const [ sortIndex, setSortIndex ] = useState(0);
const onSortChange = e => setSortIndex(+e.target.value);

<select value={sortIndex} onChange={onSortChange}>
  {sortOptions.map((n, i) => <option value={i}>{n.key}</option>)}
</select>

Сортируете свои данные:

const sortedItems = useMemo(() => {
  const { key, type } = sortOptions[sortIndex];
  const f = sortFunctions[type];
  return [...items].sort((a, b) => f(a[key], b[key]));
}, [ items, sortIndex, sortFunctions ]);

https://jsfiddle.net/gfer4p1y/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы