Подскажите решение для условного рендеринга в React

Question

Есть компонент, который отрисовывает список дел из массива объектов. Массив может выглядеть так:

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>
);
};

В примере надпись "пусто" отобразится, только если массив будет пуст. Если же в массиве что-то есть, а пустым окажется только список "важных срочных дел", то надпись "пусто" нигде не выведется. Нужно, чтобы она отображалась для данного компонента, даже если фильтр отсеял все объекты.

Answer 1

Удалось найти оптимальное решение, введя дополнительный стейт и проверку useEffect:

const [empty, setEmpty] = useState(true);

    useEffect(() => {
        for (let i = 0; i < list.length; i++) {
            if (list[i].priority === type) {
                setEmpty(false);
                break;
            }
            setEmpty(true);
        }
    }, [list.length, type])

Если хотя бы одно дело в массиве имеет priority такой же, как type компонента, то "пустота" не отрисуется. Осталось вывести "пустоту" по условию:

{
    empty && <p className='empty'>пусто</p>
}

БЛОГ НА HUSL

Подскажите решение для условного рендеринга в React

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