Пошук уроків, статей та іншого контенту
Способи показувати різний UI залежно від даних — і класична пастка з && та нулем.
Майже кожен реальний інтерфейс показує різний вміст залежно від стану: спінер під час завантаження, повідомлення про помилку, порожній стан «немає даних», список, коли дані є. Оскільки JSX — це звичайні JavaScript-вирази, для умовного відображення використовуються ті самі інструменти, що й у звичайному JS, а не окремий спеціальний синтаксис шаблонів.
Найпоширеніший спосіб вибрати один із двох варіантів UI прямо в JSX:
function Status({ isOnline }) {
return <span>{isOnline ? "🟢 Онлайн" : "⚫ Офлайн"}</span>;
}Коли другого варіанту (інакше — нічого) не потрібно, зручний оператор &&: якщо ліва частина falsy, вираз повертає її й нічого не рендериться; якщо truthy — рендериться права частина:
function Notifications({ count }) {
return (
<div>
{count > 0 && <span className="badge">{count}</span>}
</div>
);
}Класична пастка: {items.length && <List items={items} />}. Якщо items.length дорівнює 0, вираз повертає саме число 0 (falsy, але не false/null/undefined), а React рендерить будь-яке число як текст — на екрані буквально з'явиться символ «0». Виправлення: явно привести до булевого значення — items.length > 0 && <List items={items} />.
Коли варіантів UI кілька і вони суттєво різні (завантаження / помилка / порожньо / дані), зручніше повернути різний JSX із різних гілок функції на початку компонента, а не намагатись вмістити всю логіку в один вкладений вираз:
function UserProfile({ status, error, user }) {
if (status === "loading") return <Spinner />;
if (status === "error") return <ErrorMessage text={error} />;
if (!user) return <EmptyState />;
return <UserCard user={user} />;
}JSX не можна вставити всередину if/else напряму (це вирази, а if — оператор), тому для складнішого вибору змінну з готовим JSX заповнюють до return:
function Badge({ role }) {
let label;
if (role === "admin") {
label = <span className="badge-admin">Адмін</span>;
} else if (role === "moderator") {
label = <span className="badge-mod">Модератор</span>;
} else {
label = <span className="badge-user">Користувач</span>;
}
return <div>{label}</div>;
}count && <Badge /> замість count > 0 && <Badge /> — рендерить літеральний «0» на екрані, коли count дорівнює нулю.
Вкладені тернарні оператори кількох рівнів прямо в JSX — читається набагато гірше, ніж ранній вихід чи проміжна змінна; варто розбити на кілька if або окремий компонент.
Забувати явний стан завантаження/помилки — рендерити <UserCard user={user} /> без перевірки, чи user узагалі вже завантажений, призводить до помилки звернення до полів undefined.
Умовний рендеринг у React — це звичайні JavaScript-вирази (тернарний оператор, &&, ранній вихід, проміжні змінні), а не окремий шаблонний синтаксис. Найчастіша пастка — оператор && із числовим лівим операндом, що дорівнює нулю: він рендерить сам нуль замість «нічого», тому умову варто явно приводити до булевого значення.