# Чекбоксы и условный рендеринг в 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>`

Дан чекбокс и абзац. Если чекбокс отмечен, пусть абзац будет видимым на экране, а если не отмечен - спрячьте его.

←→
↑