Nilai Boolean dalam State di React

Mari buat state inCart yang akan menunjukkan apakah produk berada dalam keranjang atau tidak:

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

Biarkan nilai false berarti produk tidak berada dalam keranjang, dan nilai true berarti berada dalam keranjang. Tampilkan informasi tentang ini dengan menggunakan operator ternary:

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

Sekarang mari buat tombol yang, ketika ditekan, akan menambahkan produk ke keranjang:

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

Mari modifikasi kode kita sehingga penekanan pertama pada tombol menambahkan ke keranjang, dan penekanan kedua menghapusnya dari keranjang:

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

Buatlah tombol yang, ketika ditekan, akan memblokir pengguna dan tombol yang, ketika ditekan, akan membatalkan pemblokiran pengguna.

Modifikasi tugas sebelumnya sehingga dari dua tombol, hanya tombol yang sesuai yang selalu terlihat. Artinya, jika pengguna diblokir, maka tombol untuk membatalkan pemblokiran yang terlihat, dan jika tidak diblokir - tombol untuk memblokir.