Loģiskā vērtība stāvoklī React

Izveidosim stāvokli inCart, kurš rādīs, vai produkts atrodas grozā vai nē:

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

Lai vērtība false nozīmē, ka produkts nav grozā, bet vērtība true - ka atrodas grozā. Izvadīsim informāciju par to ar ternārā operatora palīdzību:

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

Tagad izveidosim pogu, kuras nospiešana pievienos produktu grozam:

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

Modificēsim mūsu kodu tā, lai pirmā nospiešana uz pogas pievienotu grozā, bet otrā - noņemtu no tā:

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

Izveidojiet pogu, kuras nospiešana bloķēs lietotāju un pogu, kuras nospiešana atbloķēs lietotāju.

Modificējiet iepriekšējo uzdevumu tā, lai no divām pogām vienmēr būtu redzama tikai atbilstošā. Tas ir, ja lietotājs ir bloķēts, tad redzama poga atbloķēšanai, bet ja nav bloķēts - bloķēšanai.