Динамическая сортировка массива объектов в выпадающем списке
Реализован выпадающий список в котором при выборе элемента массива 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">
{CurrencySigns.Rub}
</span>
</div>
)}
</div>
);
})}
</div>
);
};
Ответы (1 шт):
Автор решения: akokoryshkin
→ Ссылка
В итоге мне помог такой подход:
const newItems = [
selectedAccount,
...items.filter(item => item.id !== selectedAccount?.id)
];