Условный рендеринг

Условный рендеринг — это вывод разной разметки в зависимости от данных: выполнена задача или нет, пуст список или в нём что-то есть. Отдельных конструкций для этого в JSX нет — используются обычные if, тернарный оператор и && из JavaScript.

Условие через if

Компонент может вернуть разную разметку. Пусть TodoList показывает сообщение, когда задач нет:

// src/components/TodoList.jsx
import TodoItem from './TodoItem.jsx';
 
export default function TodoList({ todos }) {
  if (todos.length === 0) {
    return <p>Задач нет. Можно отдохнуть.</p>;
  }
 
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

Передайте из App пустой массив — <TodoList todos={[]} /> — и на странице появится «Задач нет. Можно отдохнуть.».

Тернарный оператор

Когда отличается только часть разметки, условие пишут прямо в JSX через ? :. Отметим выполненные задачи в src/components/TodoItem.jsx:

// src/components/TodoItem.jsx
export default function TodoItem({ todo }) {
  return (
    <li>
      {todo.done ? '✓' : '○'} {todo.text}
    </li>
  );
}

Перед выполненной задачей появится галочка, перед остальными — кружок.

Оператор &&

Если показывать нужно что-то или ничего, подойдёт &&. Правая часть выводится, только когда левая истинна:

// src/components/TodoItem.jsx
export default function TodoItem({ todo }) {
  return (
    <li>
      {todo.text}
      {todo.done && <span> (готово)</span>}
    </li>
  );
}

У выполненных задач после текста появится «(готово)», у остальных — ничего.

Условие в атрибуте

Условия работают и в атрибутах. Например, класс для зачёркивания:

// src/components/TodoItem.jsx
export default function TodoItem({ todo }) {
  return <li className={todo.done ? 'done' : ''}>{todo.text}</li>;
}

С правилом .done { text-decoration: line-through; } в src/index.css выполненные задачи станут зачёркнутыми.

Что React не выводит

Вернуть null из компонента — способ ничего не показывать.

Сложные условия

Если вариантов больше двух, не вкладывайте тернарные операторы друг в друга — их трудно читать. Вычислите результат заранее через if в теле компонента и выведите переменную.

Частая ошибка

Число 0 — ложное значение, но React его выводит. Поэтому при пустом списке на странице появится «0»:

// Неправильно: {todos.length && <TodoList todos={todos} />}
 
function Tasks({ todos }) {
  return <div>{todos.length > 0 && <TodoList todos={todos} />}</div>;
}

Слева от && должно стоять логическое значение: сравнение > 0 вместо голого числа.