Есть компонент, который отрисовывает список дел из массива объектов. Массив может выглядеть так:
const list = [
{
id: 1,
text: 'Бегать',
priority: 'none',
},
{
id: 2,
text: 'Важная срочная задача',
priority: 'priority1',
},
]
Если дел нет, то должна отображаться надпись "пусто". Проблема в том, что перед отрисовкой массив проходит через фильтр, и не все объекты добираются до отрисовки. Например, здесь мы должны отрисовать только важные срочные дела, которые попадают под категорию priority1:
const TaskList = ({ list, type }) => {
return (
<StyledTaskList type={type}>
<div className='list'>
{
list.map((item) => {
if (item.priority === type) {
return <Task
text={item.text}
priority={item.priority}
key={item.id}
/>
}
})
}
{
!list.length && <p className='empty'>пусто</p>
}
</div>
</StyledTaskList>
);
};
В примере надпись "пусто" отобразится, только если массив будет пуст. Если же в массиве что-то есть, а пустым окажется только список "важных срочных дел", то надпись "пусто" нигде не выведется. Нужно, чтобы она отображалась для данного компонента, даже если фильтр отсеял все объекты.