Работа с чекбоксами в 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>;
}

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

С помощью трех чекбоксов попросите пользователя выбрать языки, которые он знает: html, css и js. Результат выбора по каждому языку выводите в отдельные абзацы.

Чекбоксы и условный рендеринг

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

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>

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