Выражения, условия и списки в разметке

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

В предыдущей статье выяснилось, что разметка — это выражение, а внутри неё есть окна обратно в JavaScript: фигурные скобки. В них допустимо любое выражение — обращение к переменной, арифметика, вызов метода, шаблонная строка. Компилятор подставляет его значение как отдельного ребёнка в вызов createElement, а не вклеивает текст в строку, как делал ваш render().

tsx

const user = { name: "Рико", open: 3 };
const tags = ["кофе", "статья"];

function Summary() {
  return (
    <p id="out">
      {user.name}: {user.open * 2} задач, теги — {tags.join(", ")}, год {new Date(2026, 8, 3).getFullYear()}
    </p>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Summary />);

// React рисует не сразу, а отдельной задачей — поэтому смотрим из таймера
setTimeout(() => {
  console.log(document.getElementById("out")!.textContent);
}, 50);

страница примера

Сначала предположите, что выведет код

Четыре пары скобок — четыре выражения, каждое со своим типом: строка, число, снова строка, число. В текст они превратились только на самом последнем шаге, когда React создавал текстовые узлы. Ограничение ровно одно: внутри скобок должно стоять выражение. Инструкции — if, for, let — там не живут: у них нет значения, которое можно было бы подставить.

tsx

function Greeting({ hour }: { hour: number }) {
  return <p>{if (hour < 12) "Доброе утро"}</p>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Greeting hour={9} />);

страница примера

Сначала предположите, что выведет код

Компилятор останавливается на первом же символе после скобки: «Ожидалось выражение» — и добавляет ещё две претензии следом: разбор сбился и до конца строки уже не восстановился. В выводе к тому же SyntaxError: до браузера доехало то, что компилятор сумел собрать из обломков. Всё, что дальше в этой статье, — способы записать условие и цикл так, чтобы у них появилось значение. Но прежде нужно выяснить, что React делает со значениями разных типов.

tsx

function Probe() {
  return (
    <ul>
      <li id="a">[{null}] [{undefined}]</li>
      <li id="b">[{true}] [{false}]</li>
      <li id="c">[{0}] [{""}]</li>
      <li id="d">[{[1, 2, 3]}]</li>
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Probe />);

setTimeout(() => {
  for (const id of ["a", "b", "c", "d"]) {
    console.log(id, document.getElementById(id)!.textContent);
  }
}, 50);

страница примера

Сначала предположите, что выведет код

null, undefined, true и false не рисуются вовсе — на их месте пусто, и это не ошибка. На этом правиле держится весь следующий раздел. Ноль — обычное число, и он рисуется как «0»: запомните это, через минуту оно выстрелит. А массив React разворачивает и рисует каждый элемент по очереди — без запятых между ними, в отличие от ${[1, 2, 3]} в шаблонной строке, где получилось бы «1,2,3». На этом держится раздел про списки.

Объект нарисовать нельзя, и это единственный тип значений, на котором React падает. Самая частая жертва — Date: {createdAt} вместо {createdAt.toLocaleDateString()}. В настоящем проекте до запуска дело не дойдёт: тип детей — ReactNode, и объекта среди его вариантов нет.

tsx

const createdAt = new Date(2026, 8, 3);

function Stamp() {
  return <time>{createdAt}</time>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Stamp />);

страница примера

Сначала предположите, что выведет код

Прямо причину в панели не называет ни одна строка. Первая — сама ошибка, но её текст браузер от песочницы прячет: React подключён в неё отдельным скриптом с чужого происхождения, а у таких скриптов браузер вырезает сообщения исключений. Вторая строка — от отладочной сборки React: она называет компонент, в котором всё сломалось, — <time>. В настоящем проекте, где React собран вместе со страницей, консоль покажет и сам текст: Objects are not valid as a React child (found: [object Date]) — объект не может быть ребёнком. Боевая сборка React вместо текста печатает только номер ошибки, #31, и ссылку на его расшифровку.

Раз false рисуется как пустота, условие «показать, если» пишется через && — тот самый, что вы разбирали в части I: он возвращает левый операнд, если тот ложный, и правый в остальных случаях. Ложный левый операнд превращается в ничего, истинный — в элемент справа.

tsx

function Task({ title, done }: { title: string; done: boolean }) {
  return <li>{title}{done && <b> — готово</b>}</li>;
}

function App() {
  return (
    <ul>
      <Task title="Кофе" done={true} />
      <Task title="Статья" done={false} />
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

setTimeout(() => {
  console.log(Array.from(document.querySelectorAll("li"), (li) => li.textContent));
}, 50);

страница примера

Сначала предположите, что выведет код

Приём настолько удобный, что его начинают писать не думая, — и ровно тут он подводит. Слева от && оказывается не логическое значение, а число. Прежде чем запускать, ответьте: что окажется в секции, если писем нет?

tsx

function Inbox({ letters }: { letters: string[] }) {
  return (
    <section id="inbox">
      <h3>Входящие</h3>
      {letters.length && <p>{letters.length} новых</p>}
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Inbox letters={[]} />);

setTimeout(() => {
  console.log(document.getElementById("inbox")!.textContent);
}, 50);

страница примера

Сначала предположите, что выведет код

&& вернул левый операнд — ноль, а ноль, как выяснилось разделом выше, рисуется. Компилятор промолчал совершенно законно: число — полноправный ReactNode, ошибки типов здесь нет, есть ошибка смысла. Лечится она тем, что слева ставят настоящее условие — letters.length > 0. Правило простое: слева от && в разметке — только boolean.

Пустую строку React тоже пропускает, поэтому {name && <b>…</b>} со строкой слева выглядит рабочим. Это везение, а не правило: с числом слева тот же код напечатает ноль. Условие лучше писать явно.

Когда веток две, берут тернарный оператор: обе части — выражения, и результат тоже. А когда веток три и больше, условие незачем втискивать в скобки: JSX — значение, значит, его можно вычислить обычным if до return и подставить готовым.

tsx

type Currency = "AED" | "RUB";

function Price({ amount, currency }: { amount: number; currency: Currency }) {
  let label: React.ReactNode = null; // «ничего» — законное значение для разметки
  if (amount === 0) {
    label = <em>бесплатно</em>;
  } else if (currency === "AED") {
    label = <span>{amount} дирхамов</span>;
  } else {
    label = <span>{amount} рублей</span>;
  }
  return <p>{label}</p>;
}

function App() {
  return (
    <div id="prices">
      <Price amount={0} currency="AED" />
      <Price amount={40} currency="AED" />
      <Price amount={900} currency="RUB" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

setTimeout(() => {
  console.log(Array.from(document.querySelectorAll("p"), (el) => el.textContent));
}, 50);

страница примера

Сначала предположите, что выведет код

Задача	Запись
Показать или ничего	`{cond && <X />}`, где `cond` — строго `boolean`
Одно из двух	`{cond ? <A /> : <B />}`
Три ветки и больше	Переменная типа `ReactNode` и обычный `if` или `switch` до `return`
Компонент целиком не нужен	`return null` — React ничего не нарисует и не пожалуется

Ранний return null удобен, но ставьте его после всех хуков: useState, вызванный ниже условия, нарушает правила хуков. Когда такой возврат падает с ошибкой, а когда молча теряет состояние, разбирает статья «Правила хуков и почему они такие» в главе 6.

В доске задач из части II список собирался в одну строку: tasks.map((t) => `<li>${t.title}</li>`).join(""), и эта строка уходила в innerHTML. В JSX остаётся только первая половина. Колбэк возвращает элемент, а не строку, join исчезает: массив в фигурных скобках React разворачивает сам, вы это видели на [1, 2, 3].

tsx

interface Task {
  id: number;
  title: string;
  done: boolean;
}

const tasks: Task[] = [
  { id: 1, title: "Кофе", done: true },
  { id: 2, title: "Статья", done: false },
  { id: 3, title: "Прогулка", done: false }
];

function Board() {
  return (
    <ul id="board">
      {tasks.map((t) => (
        <li>{t.done ? "[x]" : "[ ]"} {t.title}</li>
      ))}
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);

setTimeout(() => {
  const board = document.getElementById("board")!;
  console.log(board.children.length);
  console.log(board.firstElementChild!.textContent);
}, 50);

страница примера

Сначала предположите, что выведет код

Три записи — три li, тернарный оператор из прошлого раздела ставит отметку. Ни строки, ни innerHTML, ни разбора HTML: React получил массив из трёх описаний и создал три узла. Но в настоящем проекте этот код не пройдёт молча. В режиме разработки React напечатает в консоль предупреждение: Each child in a list should have a unique "key" prop. В песочнице стоит та же отладочная сборка React, поэтому это предупреждение вы видите прямо в выводе примера выше: это не сбой песочницы, а та самая проверка режима разработки.

Исправление — атрибут key на том элементе, который возвращает колбэк. Значение должно быть уникальным среди соседей и постоянным от отрисовки к отрисовке. Идентификатор записи подходит идеально — тот самый id, который в части II вы записывали в data-id, чтобы обработчик клика узнавал строку. React нужен он же и по той же причине: узнавать строки.

tsx

interface Task {
  id: number;
  title: string;
  done: boolean;
}

function Row({ task }: { task: Task }) {
  return <li>{task.done ? "[x]" : "[ ]"} {task.title}</li>;
}

function Board({ tasks, onlyOpen }: { tasks: Task[]; onlyOpen: boolean }) {
  // filter и map — обычная цепочка: фильтровать можно до разметки
  const visible = onlyOpen ? tasks.filter((t) => !t.done) : tasks;
  return (
    <ul id="board">
      {visible.map((t) => (
        <Row key={t.id} task={t} />
      ))}
    </ul>
  );
}

const tasks: Task[] = [
  { id: 1, title: "Кофе", done: true },
  { id: 2, title: "Статья", done: false },
  { id: 3, title: "Прогулка", done: false }
];

ReactDOM.createRoot(document.getElementById("root")!).render(
  <Board tasks={tasks} onlyOpen={true} />
);

setTimeout(() => {
  console.log(document.getElementById("board")!.textContent);
}, 50);

страница примера

Сначала предположите, что выведет код

Обратите внимание, где стоит key: на <Row> в вызове map, а не на <li> внутри Row. React смотрит на ключи тех элементов, что лежат в массиве; то, что компонент вернёт изнутри, к массиву уже не относится. И внутрь Row этот атрибут не попадает: key React забирает себе, а разговор о том, что попадает, — в статье «Пропсы и их типы».

Тип у ключа — string | number | bigint. Целую запись вместо её идентификатора компилятор не пропустит: ошибка нарочная, посмотрите, как он её сформулирует.

tsx

interface Task {
  id: number;
  title: string;
}

const tasks: Task[] = [{ id: 1, title: "Кофе" }, { id: 2, title: "Чай" }];

function Board() {
  return (
    <ul>
      {tasks.map((t) => (
        <li key={t}>{t.title}</li>
      ))}
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Board />);

страница примера

Сначала предположите, что выведет код

Иногда колбэк должен вернуть не один элемент, а пару соседей — dt и dd словаря, две строки таблицы. Лишний div тут не выход: внутри tbody он запрещён, в словаре просто не нужен. А короткий фрагмент <> не принимает атрибутов — для этого случая у фрагмента есть полная форма.

tsx

const terms = [
  { id: "jsx", word: "JSX", meaning: "синтаксис вызова createElement" },
  { id: "key", word: "key", meaning: "метка элемента в списке" }
];

function Glossary() {
  return (
    <dl id="glossary">
      {terms.map((t) => (
        <React.Fragment key={t.id}>
          <dt>{t.word}</dt>
          <dd>{t.meaning}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Glossary />);

setTimeout(() => {
  const dl = document.getElementById("glossary")!;
  console.log(dl.children.length);
  console.log(dl.children[0]!.tagName, dl.children[1]!.tagName);
}, 50);

страница примера

Сначала предположите, что выведет код

В статье о том, зачем нужен React, вы видели, как он сверяет старое описание с новым: по позиции и типу элемента. Пока список только растёт снизу, позиции стабильны, и всё сходится. Но стоит вставить запись в начало — и на каждой позиции оказывается другая запись. Что при этом произойдёт с состоянием строк, которое хранит useState?

Строка ниже — компонент со своим счётчиком. Пример нажимает «+1» у первой строки дважды, затем добавляет запись в начало. Ключ — индекс, как многие пишут, чтобы предупреждение замолчало. Запишите прогноз: у какой строки окажется двойка?

tsx

interface Item {
  id: number;
  title: string;
}

function Row({ title }: { title: string }) {
  const [clicks, setClicks] = React.useState(0);
  return <li><button onClick={() => setClicks(clicks + 1)}>+1</button> {title}: {clicks}</li>;
}

function List() {
  const [items, setItems] = React.useState<Item[]>([
    { id: 1, title: "Кофе" },
    { id: 2, title: "Чай" }
  ]);
  const addFirst = () => setItems([{ id: 3, title: "Вода" }, ...items]);
  return (
    <div>
      <button id="add" onClick={addFirst}>добавить в начало</button>
      <ul>
        {items.map((item, index) => (
          <Row key={index} title={item.title} />
        ))}
      </ul>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);

const rows = () => Array.from(document.querySelectorAll("li"), (li) => li.textContent);
const plusFirst = () => document.querySelector<HTMLButtonElement>("li button")!.click();

// клики в разных задачах: в одной они увидели бы один и тот же снимок clicks
setTimeout(plusFirst, 50); // «+1» у первой строки
setTimeout(plusFirst, 100);
setTimeout(() => console.log(rows()), 150);
setTimeout(() => document.getElementById("add")!.click(), 200);
setTimeout(() => console.log(rows()), 250);

interface Item {
  id: number;
  title: string;
}

function Row({ title }: { title: string }) {
  const [clicks, setClicks] = React.useState(0);
  return <li><button onClick={() => setClicks(clicks + 1)}>+1</button> {title}: {clicks}</li>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);

const rows = () => Array.from(document.querySelectorAll("li"), (li) => li.textContent);
const plusFirst = () => document.querySelector<HTMLButtonElement>("li button")!.click();

// клики в разных задачах: в одной они увидели бы один и тот же снимок clicks
setTimeout(plusFirst, 50); // «+1» у первой строки
setTimeout(plusFirst, 100);
setTimeout(() => console.log(rows()), 150);
setTimeout(() => document.getElementById("add")!.click(), 200);
setTimeout(() => console.log(rows()), 250);

страница примера

Сначала предположите, что выведет код

Двойка досталась «Воде», которую никто не нажимал. React увидел на позиции 0 тот же ключ 0 и тот же тип Row — значит, по его правилам, это та же строка, и её состояние надо сохранить. Изменился только проп title. Строка «Кофе» переехала на позицию 1, где раньше жил «Чай», — и получила его нулевой счётчик. Ни одной записи не удалили, а данные на экране перепутались — тот самый класс ошибок, ради которого вы уходили от innerHTML.

Ключ из записи, а не из позиции, меняет картину. Проверим заодно, что стало с узлами: запомним первый li до вставки и найдём его после.

tsx

interface Item {
  id: number;
  title: string;
}

function Row({ title }: { title: string }) {
  const [clicks, setClicks] = React.useState(0);
  return <li><button onClick={() => setClicks(clicks + 1)}>+1</button> {title}: {clicks}</li>;
}

function List() {
  const [items, setItems] = React.useState<Item[]>([
    { id: 1, title: "Кофе" },
    { id: 2, title: "Чай" }
  ]);
  const addFirst = () => setItems([{ id: 3, title: "Вода" }, ...items]);
  return (
    <div>
      <button id="add" onClick={addFirst}>добавить в начало</button>
      <ul>
        {items.map((item) => (
          <Row key={item.id} title={item.title} />
        ))}
      </ul>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);

const rows = () => Array.from(document.querySelectorAll("li"), (li) => li.textContent);
const plusFirst = () => document.querySelector<HTMLButtonElement>("li button")!.click();
let coffee: Element | null = null;

setTimeout(() => {
  coffee = document.querySelector("li"); // узел строки «Кофе» до вставки
  plusFirst();
}, 50);
setTimeout(plusFirst, 100);
setTimeout(() => document.getElementById("add")!.click(), 150);
setTimeout(() => {
  console.log(rows());
  console.log(document.querySelectorAll("li")[1] === coffee);
}, 200);

interface Item {
  id: number;
  title: string;
}

function Row({ title }: { title: string }) {
  const [clicks, setClicks] = React.useState(0);
  return <li><button onClick={() => setClicks(clicks + 1)}>+1</button> {title}: {clicks}</li>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);

const rows = () => Array.from(document.querySelectorAll("li"), (li) => li.textContent);
const plusFirst = () => document.querySelector<HTMLButtonElement>("li button")!.click();
let coffee: Element | null = null;

setTimeout(() => {
  coffee = document.querySelector("li"); // узел строки «Кофе» до вставки
  plusFirst();
}, 50);
setTimeout(plusFirst, 100);
setTimeout(() => document.getElementById("add")!.click(), 150);
setTimeout(() => {
  console.log(rows());
  console.log(document.querySelectorAll("li")[1] === coffee);
}, 200);

страница примера

Сначала предположите, что выведет код

Теперь React сопоставляет строки по ключам: ключ 1 был и остался — это «Кофе» со своим состоянием, ключ 3 новый — под него создаётся строка с чистым счётчиком. Узел li не перерисован и даже не пересоздан: React переставил его на новое место. Именно так ведёт себя список, который вы в части II могли получить только полной пересборкой.

key={index} — то же самое, что вообще без key: индекс React подставляет сам, когда ключа нет. Такой ключ глушит предупреждение и не чинит ошибку.

Ключ сравнивается только с ключами соседей по одному массиву. Два разных списка на странице спокойно используют одни и те же ключи, а вложенный список внутри строки начинает свой отсчёт заново. Глобально уникальный идентификатор не нужен; нужен уникальный внутри map.

Повтор ключа среди соседей — уже ошибка: в режиме разработки React сообщит «Encountered two children with the same key», а на бою может показать одну запись вместо двух или потерять состояние. Если в данных нет поля, которое гарантированно не повторяется, ключ придётся выдавать при создании записи.

Из требований «уникален среди соседей» и «не меняется между отрисовками» правила выбора выводятся почти механически.

Откуда записи	Ключ
Из базы или API — у каждой есть `id`	`key={item.id}`, и никаких раздумий
Есть поле, уникальное по смыслу: email, slug, код валюты	Это поле — оно не меняется и не повторяется
Создаются на клиенте: новая задача, новая строка формы	Идентификатор выдаётся в момент создания — счётчиком или `crypto.randomUUID()` — и хранится вместе с записью
Статичный список, который не сортируют, не фильтруют и не пополняют спереди	Индекс допустим: позиция и есть тождество записи

Строка «в момент создания» в третьей клетке — самая важная. Случайный ключ, сгенерированный прямо в map, нарушает второе требование: он новый на каждой отрисовке. Для React это выглядит так, будто все старые записи удалили, а вместо них добавили другие. Прогноз: что станет со счётчиком строки «Кофе» после нажатия на «перерисовать»?

tsx

function Row({ title }: { title: string }) {
  const [clicks, setClicks] = React.useState(0);
  return <li><button onClick={() => setClicks(clicks + 1)}>+1</button> {title}: {clicks}</li>;
}

function List() {
  const [tick, setTick] = React.useState(0);
  const titles = ["Кофе", "Чай"];
  return (
    <div>
      <button id="tick" onClick={() => setTick(tick + 1)}>перерисовать ({tick})</button>
      <ul>
        {titles.map((title) => (
          <Row key={Math.random()} title={title} />
        ))}
      </ul>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);

const rows = () => Array.from(document.querySelectorAll("li"), (li) => li.textContent);
const plusFirst = () => document.querySelector<HTMLButtonElement>("li button")!.click();
let coffee: Element | null = null;

setTimeout(() => {
  coffee = document.querySelector("li");
  plusFirst();
}, 50);
setTimeout(plusFirst, 100);
setTimeout(() => console.log(rows()), 150);
setTimeout(() => document.getElementById("tick")!.click(), 200);
setTimeout(() => {
  console.log(rows());
  console.log(document.querySelector("li") === coffee);
}, 250);

function Row({ title }: { title: string }) {
  const [clicks, setClicks] = React.useState(0);
  return <li><button onClick={() => setClicks(clicks + 1)}>+1</button> {title}: {clicks}</li>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<List />);

const rows = () => Array.from(document.querySelectorAll("li"), (li) => li.textContent);
const plusFirst = () => document.querySelector<HTMLButtonElement>("li button")!.click();
let coffee: Element | null = null;

setTimeout(() => {
  coffee = document.querySelector("li");
  plusFirst();
}, 50);
setTimeout(plusFirst, 100);
setTimeout(() => console.log(rows()), 150);
setTimeout(() => document.getElementById("tick")!.click(), 200);
setTimeout(() => {
  console.log(rows());
  console.log(document.querySelector("li") === coffee);
}, 250);

страница примера

Сначала предположите, что выведет код

Данные не менялись, менялся только счётчик родителя — а строки потеряли состояние и получили новые узлы DOM, со всем, что к ним прилагается: фокусом, кареткой, прокруткой. Ровно те потери, что были у innerHTML, только теперь они спрятаны за атрибутом. crypto.randomUUID() внутри map — та же ошибка с более убедительным видом.

Этот же механизм используют нарочно: сменить key у компонента — значит попросить React пересоздать его с чистым состоянием. Подробно этот приём разбирает статья «Когда состояние сохраняется, а когда сбрасывается» в главе 5.

Итог по спискам умещается в одну привычку. Как только в коде появляется map с разметкой внутри, спросите себя: что в этих данных остаётся тем же, когда запись переезжает? Это и есть ключ. Если ответа нет — его нужно добавить в данные, а не выдумывать в отрисовке.

Внутри фигурных скобок — любое выражение, но не инструкция: у if и for нет значения, которое можно подставить.
null, undefined, true и false не рисуются вовсе; ноль рисуется как «0», массив разворачивается в список детей без разделителей.
Условие «показать или ничего» — через && со строго логическим левым операндом; две ветки — тернарный оператор; больше — обычный if до return.
Список — это map, возвращающий элементы; join и innerHTML исчезают, потому что массив в скобках React разворачивает сам.
key нужен React, чтобы узнавать записи между отрисовками: без него состояние и узлы прилипают к позиции, а не к данным.
Ключ берут из данных — id или уникальное поле; индекс годится только для неподвижного списка, а случайное число в map пересоздаёт всё при каждой отрисовке.

1/4В разметке стоит {messages.length && <p>Есть новые</p>}, а массив messages пуст. Что окажется на странице?

2/4Список строк с собственным useState в каждой отрисован с key={index}. У первой строки счётчик равен 2. В начало массива вставили новую запись. Где окажется двойка?

3/4Внутри map написано key={crypto.randomUUID()}. Автор считает, что так ключи точно уникальны. Что произойдёт при следующей отрисовке родителя?

4/4Чем отличается результат {["a", "b"]} в JSX от ${["a", "b"]} в шаблонной строке?

Ноль в корзине

Компонент показывает список покупок, а если корзина пуста — ничего. Сейчас при пустой корзине на странице появляется лишний символ. Найдите его в выводе и почините, не меняя структуру разметки.

tsx

function Cart({ items }: { items: string[] }) {
  return (
    <section id="cart">
      <h3>Корзина</h3>
      {items.length && (
        <ul>
          {items.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      )}
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Cart items={[]} />);

setTimeout(() => {
  console.log(document.getElementById("cart")!.textContent); // сейчас Корзина0, а нужно Корзина
}, 50);

страница примера

Сначала предположите, что выведет код

Слева от && стоит число: при пустой корзине это 0, и React честно рисует его текстом. Условие должно быть логическим.

jsлистинг · не запускается

{items.length > 0 && (
  <ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
)}

{items.length > 0 && (
  <ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
)}

Тот же результат даст тернарный оператор с null во второй ветке: {items.length ? <ul>…</ul> : null}. Обратите внимание на ключ: названия товаров здесь уникальны, поэтому key={item} допустим — но если один товар можно положить дважды, ключом должен стать идентификатор записи.

Доска задач на map

Перед вами данные доски из части II. Напишите компонент Board, который рисует по li на задачу: отметка «[x]» или «[ ]», затем название. Выполненные задачи — курсивом через <i>, остальные обычным текстом. Ключ выберите из данных.

tsx

interface Task {
  id: number;
  title: string;
  done: boolean;
}

const tasks: Task[] = [
  { id: 1, title: "Кофе", done: true },
  { id: 2, title: "Статья", done: false },
  { id: 3, title: "Прогулка", done: false }
];

function Board({ tasks }: { tasks: Task[] }) {
  // ваш код: список из tasks
  return <ul id="board"></ul>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Board tasks={tasks} />);

setTimeout(() => {
  const board = document.getElementById("board")!;
  console.log(board.children.length); // сейчас 0, а нужно 3
  console.log(board.querySelectorAll("i").length); // нужно 1
  console.log(board.firstElementChild?.textContent); // нужно [x] Кофе
}, 50);

страница примера

Сначала предположите, что выведет код

Отметка — тернарный оператор в скобках, курсив — ещё один тернарный оператор, у которого обе ветки возвращают разметку. Ключ — id: он есть в данных и не меняется.

jsлистинг · не запускается

function Board({ tasks }: { tasks: Task[] }) {
  return (
    <ul id="board">
      {tasks.map((t) => (
        <li key={t.id}>
          {t.done ? "[x]" : "[ ]"} {t.done ? <i>{t.title}</i> : t.title}
        </li>
      ))}
    </ul>
  );
}

function Board({ tasks }: { tasks: Task[] }) {
  return (
    <ul id="board">
      {tasks.map((t) => (
        <li key={t.id}>
          {t.done ? "[x]" : "[ ]"} {t.done ? <i>{t.title}</i> : t.title}
        </li>
      ))}
    </ul>
  );
}

Если второй тернарный оператор кажется тяжёлым, вынесите его в переменную до return или в отдельный компонент Row — тогда key переедет на <Row>.

Сортировка без потерь

В списке городов у каждой строки свой флажок «избранное» в состоянии. Кнопка сортирует список по алфавиту. Сейчас после сортировки отметка остаётся на первой позиции, а не у того города, который отметили. Пример нажимает всё за вас — исправьте ключ так, чтобы после сортировки избранным остался Дубай.

tsx

interface City {
  code: string;
  name: string;
}

function Row({ name }: { name: string }) {
  const [fav, setFav] = React.useState(false);
  return <li><button onClick={() => setFav(!fav)}>{fav ? "★" : "☆"}</button> {name}</li>;
}

function Cities() {
  const [cities, setCities] = React.useState<City[]>([
    { code: "DXB", name: "Дубай" },
    { code: "AUH", name: "Абу-Даби" },
    { code: "SHJ", name: "Шарджа" }
  ]);
  const sort = () => setCities([...cities].sort((a, b) => a.name.localeCompare(b.name)));
  return (
    <div>
      <button id="sort" onClick={sort}>по алфавиту</button>
      <ul>
        {cities.map((city, index) => (
          <Row key={index} name={city.name} />
        ))}
      </ul>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Cities />);

const rows = () => Array.from(document.querySelectorAll("li"), (li) => li.textContent);
setTimeout(() => document.querySelector<HTMLButtonElement>("li button")!.click(), 50); // звезда Дубаю
setTimeout(() => document.getElementById("sort")!.click(), 100);
setTimeout(() => console.log(rows()), 150);
// сейчас ["★ Абу-Даби", "☆ Дубай", "☆ Шарджа"], а нужно ["☆ Абу-Даби", "★ Дубай", "☆ Шарджа"]

interface City {
  code: string;
  name: string;
}

function Row({ name }: { name: string }) {
  const [fav, setFav] = React.useState(false);
  return <li><button onClick={() => setFav(!fav)}>{fav ? "★" : "☆"}</button> {name}</li>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(<Cities />);

const rows = () => Array.from(document.querySelectorAll("li"), (li) => li.textContent);
setTimeout(() => document.querySelector<HTMLButtonElement>("li button")!.click(), 50); // звезда Дубаю
setTimeout(() => document.getElementById("sort")!.click(), 100);
setTimeout(() => console.log(rows()), 150);
// сейчас ["★ Абу-Даби", "☆ Дубай", "☆ Шарджа"], а нужно ["☆ Абу-Даби", "★ Дубай", "☆ Шарджа"]

страница примера

Сначала предположите, что выведет код

Индекс описывает позицию, а не город, поэтому после сортировки состояние «первой строки» досталось Абу-Даби. Ключом должно быть поле, которое остаётся с записью при любой перестановке. В данных есть код аэропорта — он уникален и не меняется.

tsxлистинг · не запускается

{cities.map((city) => (
  <Row key={city.code} name={city.name} />
))}

{cities.map((city) => (
  <Row key={city.code} name={city.name} />
))}

Название тоже сработало бы, пока города не повторяются, но код надёжнее: два города с одинаковым названием — реальность, два одинаковых кода — нет. Индекс в качестве ключа годится только для списка, который никогда не переставляют.

Выражения, условия и списки в разметке

Видеоразбор темы за 5–7 минут

Фигурные скобки: выражение, а не инструкцияЧто можно писать внутри {…} и во что это превращается

Условие: && или тернарный операторПоказать или спрятать — и ловушка с нулём

Список — это map без joinМассив элементов вместо склеенной строки

Что ломается без keyСостояние прилипает к позиции, а не к записи

Какой ключ выбратьИдентификатор из данных, индекс — по расчёту, случайное число — никогда

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Ноль в корзине

Доска задач на map

Сортировка без потерь