Справочник React

Условный рендеринг: показываем нужное состояние

React использует обычные выражения JavaScript, чтобы выбирать разметку. Для крупных веток удобен ранний return, для короткого выбора — тернарный оператор.

Рабочий пример

function Profile({ user, isLoading, error }) {
  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage text={error.message} />;
  if (!user) return <EmptyState />;
  return <h2>{user.name}</h2>;
}

Отдельные ветки явно описывают все состояния интерфейса. Выражение condition && <Panel /> подходит, если при false не нужно показывать ничего.

Когда применять

Не помещай сложную бизнес-логику прямо в JSX. Сначала вычисли понятные переменные или выдели компонент состояния.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Получать 0 на странице из выражения count &&
• Вкладывать несколько тернарных операторов
• Забывать состояние ошибки или пустого ответа