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>;
}

ユーザーをBANするボタンと、ユーザーのBANを解除するボタンを作成してください。

前のタスクを修正して、2つのボタンのうち、適切なボタンだけが常に表示されるようにしてください。つまり、ユーザーがBANされている場合はBAN解除用のボタンが表示され、 BANされていない場合はBAN用のボタンが表示されます。