Динамическая сортировка массива объектов в выпадающем списке

Реализован выпадающий список в котором при выборе элемента массива items добавляется класс active. Все работает, но необходимо отображать выбранный элемент первым в списке, а не в произвольном порядке. Я пробовал такой подход const newItems = [selectedAccount, ...items] и затем уже мапить newItems, но проблема в том что тогда выбранный элемент дважды отображается в выпадающем списке.

type TAccountListProps= {
  isVisible: boolean;
  items: Accounts.Account[];
  selectedAccount: Accounts.Account | null;
  onSelect: (id: string) => void;
  onToggle: (value: boolean) => void;
};

export const AccountList: React.FunctionComponent<TAccountListProps> = ({
  isVisible,
  items,
  selectedAccount,
  onSelect,
  onToggle
}) => {
  if (!isVisible) {
    return null;
  }

  return (
    <div className="account-list">

      {items.map((item) => {

        const isSelected = item.id == selectedAccount?.id;

        return (
          <div
            key={item.id}
            className={classnames(
              'account-list__account',
              { 'account-list__account_active': isSelected }
            )}
            onClick={() => {
              onSelect(item.id);
              onToggle(false);
            }}
          >
            <div className="account-list__icon-block">
              <CardOutline className="account-list__icon" />
              <div className="account-list__info">
                <div className="account-list__name">
                  Расчётный счёт
                </div>
                <div className="account-list__number">
                  {formatAccountNumber(item.num.value)}
                </div>
              </div>
            </div>
            {item.balance && (
              <div className="account-list__balance">
                <span>{item.balance}</span>
                <span className="account-list__currency">
                  &nbsp;
                  {CurrencySigns.Rub}
                </span>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

Ответы (1 шт):

Автор решения: akokoryshkin

В итоге мне помог такой подход:

const newItems = [
    selectedAccount,
    ...items.filter(item => item.id !== selectedAccount?.id)
  ];
→ Ссылка