Работа с чекбоксами в React

Работа с чекбоксами также осуществляется по схожему принципу, только вместо атрибута value мы указываем атрибут checked. Если в этот атрибут передать true - то чекбокс будет отмечен, а если false - не будет отмечен:

function App() {
return <div>
<input type="checkbox" checked={true} /> отмечен
<input type="checkbox" checked={false} /> не отмечен
</div>;
}
Обычно в атрибут checked передается стейт, содержащий логическое значение:

function App() {
const [checked, setChecked] = useState(true);

return <div>
<input type="checkbox" checked={checked} />
</div>;
}
Так же, как и при работе с инпутами, если жестко задать значение атрибута checked - состояние чекбокса нельзя будет сменить. Для корректной работы будем по изменению чекбокса менять его стейт на противоположное ему значение:

function App() {
const [checked, setChecked] = useState(true);

function handleChange() {
setChecked(!checked); // инвертируем стейт
}

return <div>
<input type="checkbox" checked={checked} onChange={handleChange} />
</div>;
}
Можем упростить:

function App() {
const [checked, setChecked] = useState(true);

return <div>
<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
</div>;
}
Давайте выведем состояние чекбокса в абзац, используя тернарный оператор:

function App() {
const [checked, setChecked] = useState(true);

return <div>
<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
<p>состояние: {checked ? 'отмечен' : 'не отмечен'}</p>
</div>;
}

Чекбоксы и условный рендеринг
Давайте сделаем так, чтобы в зависимости от отметки чекбокса, на экран выводился либо один кусочек кода, либо другой. Используем для этого условный рендеринг:

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