Λογική τιμή στην κατάσταση στο React

Ας φτιάξουμε μια κατάσταση inCart που θα δείχνει αν το προϊόν είναι στο καλάθι ή όχι:

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

Αφήστε την τιμή false να σημαίνει ότι το προϊόν δεν είναι στο καλάθι και την τιμή true - ότι είναι στο καλάθι. Ας εμφανίσουμε αυτήν την πληροφορία χρησιμοποιώντας έναν τριαδικό τελεστή:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'στο καλάθι' : 'όχι στο καλάθι'}</span>
	</div>;
}

Τώρα ας φτιάξουμε ένα κουμπί που, όταν πατηθεί, το προϊόν θα προστίθεται στο καλάθι:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'στο καλάθι' : 'όχι στο καλάθι'}</span>
		<button onClick={() => setInCart(true)}>κουμπί</button>
	</div>;
}

Ας τροποποιήσουμε τον κώδικά μας έτσι ώστε το πρώτο πάτημα στο κουμπί να προσθέτει στο καλάθι και το δεύτερο - να αφαιρεί από αυτό:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'στο καλάθι' : 'όχι στο καλάθι'}</span>
		<button onClick={() => setInCart(!inCart)}>κουμπί</button>
	</div>;
}

Φτιάξτε ένα κουμπί, το πάτημα του οποίου θα αποκλείει τον χρήστη και ένα κουμπί, το πάτημα του οποίου θα ξεαποκλείει τον χρήστη.

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε από τα δύο κουμπιά να είναι πάντα ορατό μόνο το αντίστοιχο. Δηλαδή, εάν ο χρήστης είναι αποκλεισμένος, τότε να είναι ορατό το κουμπί για ξεαποκλεισμό, και εάν δεν είναι αποκλεισμένος - για αποκλεισμό.