Логическое значение в стейте в 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>;
}
Сделайте кнопку, нажатие на которую будет банить пользователя и кнопку, нажатие на которую будет разбанивать пользователя.
Модифицируйте предыдущую задачу так, чтобы из двух кнопок всегда была видна только соответствующая. То есть, если пользователь забанен, то видна кнопка для разбанивания, а если не забанен - для забанивания.