JSXにおける&&演算子の使用

条件が真の場合にテキストを挿入し、偽の場合は何もしない必要性が生じることがあります。これは&&演算子を使用して行います。

例を見てその動作を確認しましょう。次のコードでは、showが trueの場合、テキストを含む段落が挿入され、 falseの場合は何も挿入されません:

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

以下のコードがあります:

function App() {
	const isAuth = true;
	
	return <div>
		<p>認証済みです</p>
	</div>;
}

isAuthにtrueが設定されている場合にのみ、示されているテキスト段落が表示されるようにしてください。