Inverting for shorthand conditions in JSX

The opposite situation can also occur: you need to insert text if the condition is false, and do nothing if it is true. To do this, you need to invert the constant using the ! operator.

In the following example, if hide is false, then a paragraph with the text will be inserted:

jsxfunction App() {
  const hide = false;
  
  return <div>
    {!hide && <p>text</p>}
  </div>;
}

jsxfunction App() {
  const isAuth = false;
  
  return <div>
    <p>Please log in</p>
  </div>;
}