Лагічнае значэнне ў стэйце ў 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)}>btn</button>
	</div>;
}

Мадыфікуем наш код так, каб першае націсканне на кнопку дадавала ў кошык, а другое - выдаляла з яго:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'у кошыку' : 'не ў кошыку'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

Зрабіце кнопку, націск на якую будзе баніць карыстальніка і кнопку, націск на якую будзе разбаніць карыстальніка.

Мадыфікуйце папярэднюю задачу так, каб з двух кнопак заўсёды была бачная толькі адпаведная. Гэта значыць, калі карыстальнік забанены, то бачная кнопка для разбанівання, а калі не забанены - для банівання.