Тернарен оператор в 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>;
}