Práce s checkbox v Reactu

Práce s checkbox probíhá také podle podobného principu, jen místo atributu value uvádíme atribut checked. Pokud do tohoto atributu předáme true - checkbox bude zaškrtnut, a pokud false - nebude zaškrtnut:

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

Obvykle se do atributu checked předává stav, obsahující logickou hodnotu:

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

Stejně jako při práci se vstupy, pokud pevně nastavíme hodnotu atributu checked - stav checkboxu nebude možné změnit. Pro správnou funkci budeme při změně checkboxu měnit jeho stav na opačnou 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šit:

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

Vypišme stav checkboxu do odstavce pomocí ternárního operátoru:

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

Je dán checkbox, tlačítko a odstavec. Po kliknutí na tlačítko, pokud je checkbox zaškrtnut, vypište do odstavce text pozdravu s uživatelem, a pokud není zaškrtnut - text rozloučení.

Pomocí tří checkboxů požádejte uživatele o výběr jazyků, které ovládá: html, css a js. Výsledek výběru pro každý jazyk vypisujte do samostatných odstavců.