Logiese waarde in toestand in React

Laat ons 'n toestand inCart skep wat sal wys of die produk in die mandjie is of nie:

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

Laat die waarde false beteken dat die produk nie in die mandjie is nie, en die waarde true - dat dit in die mandjie is. Laat ons hierdie inligting uitskryf met behulp van die ternêre operator:

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

En nou maak ons 'n knoppie waarop, wanneer daarop geklik word, die produk by die mandjie gevoeg sal word:

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

Laat ons ons kode wysig sodat die eerste klik op die knoppie by die mandjie voeg, en die tweede - dit daaruit verwyder:

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

Maak 'n knoppie waarop, wanneer daarop geklik word, die gebruiker geblokkeer sal word en 'n knoppie waarop, wanneer daarop geklik word, die gebruiker se blokkering opgehef sal word.

Wysig die vorige taak sodat van die twee knoppies altyd slegs die ooreenstemmende een sigbaar is. Dit wil sê, as die gebruiker geblokkeer is, is die knoppie om die blokkering op te hef sigbaar, en as hy nie geblokkeer is nie - die een om te blokkeer.