Ternary Operator in JSX

As you already know, JavaScript code can be executed inside curly brackets. In fact, this code can be not any, but only the simplest.

In particular, the conditions if cannot be used there. Instead, abbreviated versions of the conditions should be used.

Let's output one or another text depending on the value of the constant show. Let's use the ternary operator for this:

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

You can work not only with texts, but also with tags:

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

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