Rad sa checkbox u Reactu

Rad sa checkbox takođe se obavlja po sličnom principu, samo umesto atributa value mi navodimo atribut checked. Ako se u ovaj atribut prosledi true - onda će checkbox biti označen, a ako false - neće biti označen:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> označen
		<input type="checkbox" checked={false} /> nije označen
	</div>;
}

Obično se u atribut checked prosleđuje state, koji sadrži logičku vrednost:

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

Isto kao i pri radu sa input poljima, ako se kruto postavi vrednost atributa checked - stanje checkboxa se neće moći promeniti. Za ispravan rad ćemo po promeni checkboxa menjati njegov state na suprotnu vrednost:

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

Možemo pojednostaviti:

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

Hajde da ispišemo stanje checkboxa u pasus, koristeći ternarni operator:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>stanje: {checked ? 'označen' : 'nije označen'}</p>
	</div>;
}

Dat je checkbox, dugme i pasus. Klikom na dugme, ako je checkbox označen, ispišite u pasus tekst pozdrava sa korisnikom, a ako nije označen - tekst oproštaja.

Pomoću tri checkboxa zatražite od korisnika da izabere jezike koje poznaje: html, css i js. Rezultat izbora za svaki jezik ispisujte u posebne pasuse.