Arbeid med checkbox i React

Arbeid med checkbox skjer også etter et lignende prinsipp, bare i stedet for attributten value spesifiserer vi attributten checked. Hvis du sender true til denne attributten - vil checkboxen være avmerket, og hvis false - vil den ikke være avmerket:

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

Vanligvis sendes en state, som inneholder en boolsk verdi, til attributten checked:

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

Samme som ved arbeid med input-felter, hvis du hardkoder verdien til attributten checked - kan ikke checkboxens tilstand endres. For korrekt funksjon bør vi ved endring av checkboxen endre dens state til den motsatte verdien:

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

Vi kan forenkle:

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

La oss vise checkboxens tilstand i et avsnitt, ved å bruke en ternær operator:

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

Det er gitt en checkbox, en knapp og et avsnitt. Ved klikk på knappen, hvis checkboxen er avmerket, skriv ut i avsnittet en hilsenstekst til brukeren, og hvis den ikke er avmerket - en avskjedstekst.

Med tre checkboxer, be brukeren velge språkene han/hun kan: html, css og js. Skriv ut valgresultatet for hvert språk i separate avsnitt.