Как соотнести индекс массива со свойством объекта?

Владимир,

Как соотнести индекс массива со свойством объекта?

Что-то я накрутил, теперь вообще не рендерится компонент сортировки) В любом случае большое вам спасибо, общую мысль с ключем, кажется, уловил.

Как соотнести индекс массива со свойством объекта?

Владимир, Да, верно. При клике на тип сортировки в selectedSort записывается выбранное значение

Как соотнести индекс массива со свойством объекта?

Запросы при выборе типа сортировки

Как соотнести индекс массива со свойством объекта?

В компоненте Home находится фильтр:

const Home = () => {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const { active, setActive, selectedSort, setSelectedSort } = useContext(Context);
  useEffect(() => {
    setIsLoading(true);
    fetch(
      `https://636f5291f2ed5cb047daa480.mockapi.io/items?${
        active > 0 ? `category=${active}` : ''
      }&sortBy=${selectedSort}&order=asc`,
    )
      .then((res) => res.json())
      .then((arr) => {
        setItems(arr);
        setIsLoading(false);
      });
  }, [active, selectedSort]);
  window.scrollTo(0, 0);

Компонент Sort, отвечающий за сортировку элементов:

function Sort() {
  const { selectedSort, setSelectedSort } = useContext(Context);
  const [openPopup, setOpenPopup] = useState(false);
  const list = ['По популярности', 'По цене', 'По названию'];
  const onClickSort = (i) => {
    setSelectedSort(i);
    setOpenPopup(false);
  };
  return (
    <div className="nav__sort">
      <IconContext.Provider
        value={{
          size: '16px',
          style: { verticalAlign: 'middle' },
          className: 'react-icon',
        }}
      >
        <RiArrowDownSFill />
      </IconContext.Provider>

      <span onClick={() => setOpenPopup(!openPopup)} className="activeSort">
        {list[selectedSort]}
      </span>

      {openPopup && (
        <div className="nav__sort__popup">
          <ul>
            {list.map((value, i) => (
              <li
                key={i}
                onClick={() => onClickSort(i)}
                className={selectedSort === i ? 'activeSort' : ''}
              >
                {value}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

Объекты на бэке:

[
{
"id": 0,
"imageUrl": "https://thumb.tildacdn.com/tild3132-3935-4530-b137-396535386334/-/format/webp/amsterdam_pie_1.jpg",
"title": "Амстердамский пирог",
"sizes": [
300,
600,
900
],
"price": 295,
"category": 1,
"rating": 4
},
{
"id": 1,
"imageUrl": "https://thumb.tildacdn.com/tild3862-3735-4463-b961-353539376137/-/resize/720x/-/format/webp/siberian_russian_pie.jpg",
"title": "Сибирский пирог",
"sizes": [
300,
600,
900
],
"price": 315,
"category": 5,
"rating": 2
}
]

Как соотнести индекс массива со свойством объекта?

Спасибо за ответ!
Вижу, что используя метод forEach возвращается свойство и значение объекта. Но я не пойму, как это всё прикрутить в fetch, чтобы работала фильтрация? В selectedSort у меня хранится индекс массива list. Как объяснить браузеру, чтобы он понял, что при выборе типа сортировки "по цене" в параметр sortBy передавалось свойство "price" с бэкэнда, а при выборе типа сортировки "по названию" передавалось свойство "title"?

Как использовать провайдер контекста с отслеживанием состояния для фильтрации элементов?

Большое Вам, человеческое спасибо! Все получилось! С самого утра ну никак не получалось решить эту задачу!