React JSX Условный оператор if

React поддерживает операторы условий if, но их нельзя использовать непосредственно внутри JSX-кода.

Чтобы использовать условные операторы в JSX, вы должны расположить инструкцию if вне JSX или заменить её тернарным оператором.

Вариант 1: Расположение if вне JSX

Пример

Вывести "Banana", если x меньше 10, иначе "Apple":


function Fruit() {
  const x = 5;
  let y = "Apple";
  if (x < 10) {
    y = "Banana";
  }

  return (
    <h1>{y}</h1>
  );
}

Вариант 2: Использование тернарного оператора

Пример

Вывести "Banana", если x меньше 10, иначе "Apple":


function Fruit() {
  const x = 5;
  return (
    <h1>{(x < 10) ? "Banana" : "Apple"}</h1>
  );
}
Обратите внимание, что для внедрения JavaScript-выражения внутрь JSX его необходимо заключить в фигурные скобки {}.