Как прокинуть в один компонент разные данные?

Question

[Сергей]

Есть компонент Tabs, который отображает списки билетов с разной сортировкой:
По цене
По продолжительности

Соответственно, меняется таб - меняется сортировка.
Делаю вот что:

return (
    <div className='tabs'>
      <TabsComponent defaultActiveKey='1'>
        <TabPane tab='Самый дешёвый' key='1'>
          <TicketsList
            isLoading={loading}
            tickets={sortByPrices(visibleData)}
          />
        </TabPane>
        <TabPane tab='Самый быстрый' key='2'>
          <TicketsList
            isLoading={loading}
            tickets={sortByDuration(visibleData)}
          />
        </TabPane>
      </TabsComponent>
    </div>
  );
};

TicketsList - компонент, который получает массив и отрисовывает его. Я пытаюсь в пропсы передать один массив, но с разной сортировкой, но меняя табы получаю всегда сортированные по продолжительности.

Куда копать?

Comments

[approximate solution]

Я так понимаю вы на Ютубе уроков по React насмотрелись?
Не "одну компоненту", а "один компонент"
Компонента - это математическая и физическая составляющая, а компонент в реакте - это логический кусок кода.

Вас на собесе съест какой нибудь старый пердур сеньор, если вы будете сыпать такими формулировками.

[cython]

Покажите код TicketsList

[Сергей]

cython,

export default ({ tickets, isLoading }) => {
  const createTicketsList = tickets.map(({ price, carrier, segments }) => {
      return (
        <TicketsListItem
          price={price}
          carrier={carrier}
          segment={segments}
          key={uniqueid('ticket_')}
        />
      );
  });

  const createList = (
    <ul className={style['tickets-list']}>{createTicketsList}</ul>
  );
  const content = isLoading ? <Spinner /> : createList;

  return content;
};

Answer 1

[0xD34F]

А что делают методы sortByPrices и sortByDuration? Дайте-ка попробую угадать - принимают в качестве параметра массив, и его же сортируют. Если так, то ответ на вопрос "куда копать" очевиден - копайте основы js, какие бывают типы данных, в чём их особенности. Массивы являются объектами, а объекты при присваивании / передаче в функцию / возврате из функции не копируются, копируются ссылки на них. То есть, несколько раз сортируется один и тот же массив - естественно, что при выводе всегда будет отображаться результат последней сортировки. Делайте копии массива, сортируйте копии, передавайте эти копии в экземпляры TicketsList, типа tickets={sortByPrices([...visibleData])}.

Answer 2

[Wigard]

const [items, setItems] = useState ([]); // вместо пустого массива массив с данными

function sortByPrices () {
  setItems (items => {
    // сортировка items по цене
    items = items.sort ((a, b) => a > b ? 1 : -1);
    return [...items];
  });
}

function sortByDuration () {
  setItems (items => {
    // сортировка items
    // ...
    return [...items];
  });
}

return (
  <div className='tabs'>
    <TabsComponent defaultActiveKey='1'>
      <TabPane tab='Самый дешёвый' key='1'>
        <TicketsList
          isLoading={loading}
          tickets={items}
        />
      </TabPane>
      <TabPane tab='Самый быстрый' key='2'>
        <TicketsList
          isLoading={loading}
          tickets={items}
        />
      </TabPane>
    </TabsComponent>
  </div>
);

при смене табов вызывать sortByPrices и sortByDuration в зависимости от таба

2 вариант - хранить тип сортировки в state, изменять массив через useMemo с state в зависимостях