Using the operator && in JSX

We may want to perform a text insertion if the condition is true and do nothing if it is false. This is done using the && operator.

Let's see how it works with an example. In the following code, if show is true, then a paragraph with text will be inserted, and if false is, then nothing will be inserted:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show && <p>text</p>}
  </div>;
}

jsxfunction App() {
  const isAuth = true;
  
  return <div>
    <p>you are logged in</p>
  </div>;
}