Loginė reikšmė būsenoje React

Sukurkime būseną inCart, kuri rodys, ar produktas yra krepšelyje, ar ne:

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

Tegul reikšmė false reiškia, kad produktas nėra krepšelyje, o reikšmė true - kad yra krepšelyje. Išveskime šią informaciją naudodami ternarinį operatorių:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'krepšelyje' : 'nėra krepšelyje'}</span>
	</div>;
}

Dabar sukurkime mygtuką, kurį paspaudus produktas bus pridėtas į krepšelį:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'krepšelyje' : 'nėra krepšelyje'}</span>
		<button onClick={() => setInCart(true)}>btn</button>
	</div>;
}

Modifikuokime mūsų kodą taip, kad pirmas paspaudimas ant mygtuko pridėtų į krepšelį, o antras - pašalintų iš jo:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'krepšelyje' : 'nėra krepšelyje'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

Sukurkite mygtuką, kurio paspaudimas užblokuos naudotoją ir mygtuką, kurio paspaudimas atblokuos naudotoją.

Modifikuokite ankstesnę užduotį taip, kad iš dviejų mygtukų visada būtų matomas tik atitinkamas. Tai yra, jei naudotojas užblokuotas, tai matomas atblokavimo mygtukas, o jei neužblokuotas - blokavimo mygtukas.