Рад са checkbox у 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. Резултат избора по сваком језику приказујте у посебне пасусе.