Looginen arvo tilassa Reactissa

Tehdään tila inCart, joka näyttää, onko tuote ostoskorissa vai ei:

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

Olkoon arvo false tarkoittaa, että tuote ei ole ostoskorissa, ja arvo true - että on ostoskorissa. Näytetään tieto tästä ternäärioperaattorin avulla:

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

Tehdään nappi, jota painamalla tuote lisätään ostoskoriin:

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

Muokataan koodiamme niin, että ensimmäinen painallus napista lisää ostoskoriin, ja toinen - poistaa sen sieltä:

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

Tee nappi, jonka painaminen estää käyttäjän ja nappi, jonka painaminen poistaa käyttäjän eston.

Muokkaa edellistä tehtävää niin, että kahdesta napista on aina näkyvissä vain vastaava. Eli jos käyttäjä on estetty, näkyy nappi eston poistamiseen, ja jos ei ole estetty - estämiseen.