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:

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

The following code is given:

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

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