Loogiline väärtus Reacti olekus

Teeme oleku inCart, mis näitab, kas toode on ostukorvis või mitte:

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

Väärtus false tähendagu, et toode ei ole ostukorvis, ja väärtus true - et on ostukorvis. Kuvame selle kohta teabe ternaaroperaatori abil:

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

Teeme nüüd nupu, mille vajutamisel lisatakse toode ostukorvi:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'ostukorvis' : 'ei ole ostukorvis'}</span>
		<button onClick={() => setInCart(true)}>nupp</button>
	</div>;
}

Muudame oma koodi nii, et esimene vajutus nupule lisab ostukorvi ja teine - eemaldab sealt:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'ostukorvis' : 'ei ole ostukorvis'}</span>
		<button onClick={() => setInCart(!inCart)}>nupp</button>
	</div>;
}

Tehke nupp, mille vajutamine keelab kasutaja ja nupp, mille vajutamine taastab kasutaja.

Muutke eelmist ülesannet nii, et kahest nupust oleks alati näha ainult vastav. See tähendab, et kui kasutaja on keelatud, siis on näha taastamise nupp, aga kui pole keelatud - keelamise nupp.