Nilai Boolean dalam State di React

Mari kita buat state inCart yang akan menunjukkan sama ada produk berada dalam troli atau tidak:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		
	</div>;
}

Katakan nilai false bermakna produk tidak dalam troli, dan nilai true - bermakna dalam troli. Mari paparkan maklumat tentang ini dengan menggunakan operator ternary:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'dalam troli' : 'tidak dalam troli'}</span>
	</div>;
}

Dan sekarang mari kita buat butang, yang apabila ditekan akan menambahkan produk ke dalam troli:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'dalam troli' : 'tidak dalam troli'}</span>
		<button onClick={() => setInCart(true)}>btn</button>
	</div>;
}

Mari ubah suai kod kita supaya klik pertama pada butang menambahkan ke troli, dan klik kedua - mengeluarkannya daripadanya:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'dalam troli' : 'tidak dalam troli'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

Buat butang, yang apabila ditekan akan menghentikan pengguna (ban) dan butang, yang apabila ditekan akan membatalkan hentian (unban) pengguna.

Ubah suai tugas sebelumnya supaya dari dua butang, hanya yang berkaitan sahaja yang sentiasa kelihatan. Iaitu, jika pengguna dihentikan (diban), maka butang untuk membatalkan hentian (unban) kelihatan, dan jika tidak dihentikan - butang untuk menghentikan (ban).