Чекбоксы и условный рендеринг в React
Давайте сделаем так, чтобы в зависимости от отметки чекбокса, на экран выводился либо один кусочек кода, либо другой. Используем для этого условный рендеринг:
function App() {
const [checked, setChecked] = useState(true);
let message;
if (checked) {
message = <p>сообщение 1</p>;
} else {
message = <p>сообщение 2</p>;
}
return <div>
<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
<div>{message}</div>
</div>;
}
Дан чекбокс. С помощью чекбокса спросите
у пользователя, если ли ему уже 18
лет. Если чекбокс отмечен, покажите пользователю
следующий блок кода:
<div>
<h2>Ура, вам уже есть 18</h2>
<p>
здесь расположен контент только для взрослых
</p>
</div>
А если чекбокс не отмечен - то следующий:
<div>
<p>
увы, вам еще нет 18 лет:(
</p>
</div>
Дан чекбокс и абзац. Если чекбокс отмечен, пусть абзац будет видимым на экране, а если не отмечен - спрячьте его.