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:

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

The following code is given:

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

Make the above paragraph of text only show if isAuth is set to false.