Опорная идея
Что показать на экране, часто зависит от данных. В JSX для этого используют обычные операторы JavaScript.
Тернарный оператор — выбор из двух вариантов:
{isLoggedIn ? <Profile /> : <LoginButton />}
Логическое И (&&) — показать что-то только при условии:
{cartCount > 0 && <span>В корзине: {cartCount}</span>}
Если cartCount равно 0, ничего не отрисуется. Так удобно скрывать блоки.
Для сложной логики выносят расчёт до return:
let content; if (loading) content = <Spinner />; else if (error) content = <Error />; else content = <List items={data} />; return <div>{content}</div>;
Главная идея: разметка — это просто значение, которое можно выбирать условиями, как любое другое.