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

Как вы уже знаете, внутри фигурных скобок можно выполнять JavaScript код. На самом деле этот код может быть не любым, а только самым простым.

В частности, условия if там применять нельзя. Взамен следует пользоваться сокращенными вариантами условий.

Давайте в зависимости от значения константы show выведем один или другой текст. Используем для этого тернарный оператор:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? 'text1' : 'text2'}
  </div>;
}

Можно работать не только с текстами, но и с тегами:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? <p>text1</p> : <p>text2</p>}
  </div>;
}

jsxfunction App() {
  const age = 19;
  
  return <div>
    
  </div>;
}