Práca s checkbox v React

Práca s checkbox sa vykonáva aj na podobnom princípe, len namiesto atribútu value určujeme atribút checked. Ak sa do tohto atribútu prenesie true - checkbox bude zaškrtnutý, a ak false - nebude zaškrtnutý:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> zaškrtnutý
		<input type="checkbox" checked={false} /> nezaškrtnutý
	</div>;
}

Zvyčajne sa do atribútu checked prenáša stav, ktorý obsahuje logickú hodnotu:

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

Rovnako ako pri práci so vstupmi, ak pevne nastavíte hodnotu atribútu checked - stav checkboxu nebude možné zmeniť. Pre správnu funkčnost budeme pri zmene checkboxu meniť jeho stav na opačnú hodnotu:

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

Môžeme zjednodušiť:

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

Vypíšme stav checkboxu do odseku pomocou ternárneho operátora:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>stav: {checked ? 'zaškrtnutý' : 'nezaškrtnutý'}</p>
	</div>;
}

Daný checkbox, tlačidlo a odsek. Pri kliknutí na tlačidlo, ak je checkbox zaškrtnutý, vypíšte do odseku text pozdravu s používateľom, a ak nie je zaškrtnutý - text rozlúčky.

Pomocou troch checkboxov požiadajte používateľa vybrať jazyky, ktoré ovláda: html, css a js. Výsledok výberu pre každý jazyk vypisujte do samostatných odsekov.