Умовне відображення дозволяє динамічно показувати або приховувати елементи на основі певних умов, підвищуючи гнучкість компонентів 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.

Повний код застосунку