Toán tử ba ngôi trong JSX

Như bạn đã biết, bên trong dấu ngoặc nhọn có thể thực thi mã JavaScript. Thực tế mã này không thể là bất kỳ mã nào, mà chỉ là mã đơn giản nhất.

Cụ thể, không thể sử dụng điều kiện if ở đó. Thay vào đó, bạn nên sử dụng các biến thể rút gọn của điều kiện.

Tùy thuộc vào giá trị của hằng số show, hãy hiển thị một hoặc một văn bản khác. Sử dụng toán tử ba ngôi cho việc này:

function App() {
	const show = true;
	
	return <div>
		{show ? 'văn bản 1' : 'văn bản 2'}
	</div>;
}

Có thể làm việc không chỉ với văn bản, mà còn với các thẻ:

function App() {
	const show = true;
	
	return <div>
		{show ? <p>văn bản 1</p> : <p>văn bản 2</p>}
	</div>;
}

Cho đoạn mã sau:

function App() {
	const age = 19;
	
	return <div>
		
	</div>;
}

Nếu trong age lớn hơn 18 tuổi, thì trong văn bản của thẻ div hãy hiển thị cho người dùng một đoạn văn với một văn bản, còn nếu nhỏ hơn - thì với một văn bản khác.