Vlera Boolean në State në React

Le të krijojmë një state inCart i cili do të tregojë nëse produkti është në shportë apo jo:

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

Le të thotë vlera false që produkti nuk është në shportë, dhe vlera true - që është në shportë. Le ta shfaqim këtë informacion me ndihmën e operatorit ternar:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'në shportë' : 'jo në shportë'}</span>
	</div>;
}

Tani le të bëjmë një buton, klikimi i të cilit do ta shtojë produktin në shportë:

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

Le ta modifikojmë kodin tonë në mënyrë që klikimi i parë në buton ta shtojë në shportë, dhe i dyti - ta heqë atë prej andej:

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

Bëni një buton, klikimi i të cilit do të bllokojë përdoruesin dhe një buton, klikimi i të cilit do ta zhbllokojë përdoruesin.

Modifikoni detyrën e mëparshme në mënyrë që nga dy butonat të jetë i dukshëm gjithmonë vetëm ai përkatës. Domethënë, nëse përdoruesi është i bllokuar, atëherë është i dukshëm butoni për zhbllokim, dhe nëse nuk është i bllokuar - butoni për bllokim.