Вопрос с собеседования · Frontend

Как сделать условный рендеринг в React и в чём ловушка с && и нулём?

JuniorReact
Ещё спрашивают так:
  • Почему на странице появился 0?
Коротко

Способы: тернарный оператор {cond ? <A/> : <B/>}, логическое И {cond && <A/>}, ранний return из компонента, переменная с элементом. Ловушка &&: если слева число 0, React его выведет на страницу ({items.length && <List/>} покажет «0»). Лечится явным булевым условием: {items.length > 0 && <List/>}. null, undefined, false и true React не рисует.

  • Сложные ветвления — в отдельную функцию или ранний return, а не вложенные тернарники
  • Скрыть элемент можно и CSS, но тогда он остаётся в DOM и сохраняет состояние
  • Условный рендер размонтирует компонент — его состояние теряется

А ещё NaN тоже выводится — как и 0

Подробно

if (loading) return <Spinner />;
return (
  <div>
    {error ? <ErrorText msg={error} /> : null}
    {orders.length > 0 && <OrdersTable orders={orders} />}
  </div>
);

Что хотят услышать

  • Тернарник, &&, ранний return.
  • Ловушка с 0 и её исправление.
  • Что React не выводит.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗{items.length && <List/>} при пустом массиве ничего не выведет, потому что 0 — ложное значение
  • ✗React выводит false как текст «false»
  • ✓При 0 слева от && React выведет «0»; нужно булево условие вроде items.length > 0
  • ✗Условный рендеринг в React возможен только через CSS display: none

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования