Werken met checkbox in React

Werken met checkbox verloopt ook volgens een vergelijkbaar principe, alleen in plaats van het attribuut value specificeren we het attribuut checked. Als we aan dit attribuut true doorgeven - dan wordt de checkbox aangevinkt, en als false - dan niet aangevinkt:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> aangevinkt
		<input type="checkbox" checked={false} /> niet aangevinkt
	</div>;
}

Meestal wordt aan het attribuut checked een state doorgegeven, die een booleaanse waarde bevat:

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

Net als bij het werken met inputs, als we de waarde van het attribuut checked vast instellen - kan de status van de checkbox niet worden gewijzigd. Voor correct werk zullen we bij wijziging van de checkbox zijn state veranderen naar de tegenovergestelde waarde:

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

We kunnen vereenvoudigen:

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

Laten we de status van de checkbox in een alinea weergeven, met behulp van de ternaire operator:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>status: {checked ? 'aangevinkt' : 'niet aangevinkt'}</p>
	</div>;
}

Gegeven een checkbox, een knop en een alinea. Bij klik op de knop, als de checkbox is aangevinkt, geef dan in de alinea een begroetingstekst met de gebruiker weer, en als deze niet is aangevinkt - een afscheidstekst.

Laat met behulp van drie checkboxen de gebruiker talen kiezen die hij kent: html, css en js. Het resultaat van de keuze voor elke taal geef je weer in aparte alinea's.