Умовне відображення дозволяє динамічно показувати або приховувати елементи на основі певних умов, підвищуючи гнучкість компонентів React. У цьому розділі розглядаються два стандартних підходи до умовного відображення: оператор && та тернарний оператор.

Умовне відображення з оператором &&

Синтаксис

Оператор && у React використовується для умовного відображення і працює подібно до оператора if у JavaScript. Він дозволяє відображати елементи на основі певних умов.

condition && (<p>element</p>)

Цей підхід часто застосовується, коли потрібно показати елемент лише у випадку, якщо певна умова істинна.

Приклад

Розглянемо приклад, де потрібно повідомити студентів, які склали іспит. Якщо бал студента перевищує 60 балів, буде показано повідомлення про успішне складання з його ім'ям та балом.

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

Компонент Notification умовно відображає елемент абзацу <p> залежно від значення пропса mark.

Результат Емілі не відображається, оскільки він менший за 60pts.

Умовне рендеринг за допомогою тернарного оператора

Синтаксис

Умовне відображення з використанням тернарного оператора (? ... : ...) — ще одна потужна техніка. Вона забезпечує лаконічний спосіб відображення елементів на основі умов.

condition ? (true_element) : (false_element)

Цей підхід підходить, коли потрібно вибрати між двома різними елементами залежно від умови.

Приклад

Розглянемо ситуацію, коли потрібно вітати користувачів по-різному залежно від того, чи вони увійшли в систему. Компонент Greeting демонструє умовне відображення з використанням тернарного оператора.

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

У цьому прикладі компонент Greeting вітає користувачів по-різному залежно від значення пропса loggedIn.