Giá trị Boolean trong state ở React

Hãy tạo một state inCart, state này sẽ hiển thị sản phẩm có trong giỏ hàng hay không:

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

Giả sử giá trị false có nghĩa là sản phẩm không có trong giỏ hàng, và giá trị true - có nghĩa là có trong giỏ hàng. Hãy hiển thị thông tin về điều này bằng cách sử dụng toán tử ba ngôi:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'trong giỏ hàng' : 'không trong giỏ hàng'}</span>
	</div>;
}

Và bây giờ hãy tạo một nút bấm, khi nhấn vào đó sản phẩm sẽ được thêm vào giỏ hàng:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'trong giỏ hàng' : 'không trong giỏ hàng'}</span>
		<button onClick={() => setInCart(true)}>btn</button>
	</div>;
}

Hãy sửa đổi mã của chúng ta sao cho lần nhấn đầu tiên vào nút sẽ thêm vào giỏ hàng, còn lần thứ hai - sẽ xóa khỏi giỏ hàng:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'trong giỏ hàng' : 'không trong giỏ hàng'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

Hãy tạo một nút, nhấn vào đó sẽ cấm người dùng và một nút, nhấn vào đó sẽ bỏ cấm người dùng.

Hãy sửa đổi bài toán trước đó sao cho trong hai nút, luôn chỉ hiển thị nút tương ứng. Tức là, nếu người dùng bị cấm, thì hiển thị nút để bỏ cấm, còn nếu không bị cấm - thì hiển thị nút để cấm.