Работа со checkbox во React

Работата со checkbox исто така се спроведува по сличен принцип, само што наместо атрибутот value го одредуваме атрибутот checked. Ако во овој атрибут се пренесе true - тогаш checkbox-от ќе биде означен, а ако false - нема да биде означен:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> означен
		<input type="checkbox" checked={false} /> неозначен
	</div>;
}

Обично во атрибутот checked се пренесува state, кој содржи логичка вредност:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} />
	</div>;
}

Исто како и при работа со input-и, ако ригорозно се постави вредноста на атрибутот checked - состојбата на checkbox-от нема да може да се промени. За правилна работа, при промена на checkbox-от, ќе го менуваме неговиот state во спротивна вредност:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // го инвертираме state-от
	}
	
	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>;
}

Ајде да ја прикажеме состојбата на checkbox-от во параграф, користејќи тернарен оператор:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>состојба: {checked ? 'означен' : 'неозначен'}</p>
	</div>;
}

Даден е checkbox, копче и параграф. При клик на копчето, ако checkbox-от е означен, прикажете во параграфот текст за поздравување со корисникот, а ако не е означен - текст за разделба.

Со помош на три checkbox-и, побарајте од корисникот да избере јазици што ги познава: html, css и js. Резултатот од изборот за секој јазик прикажувајте во посебни параграфи.