Εργασία με checkbox στο React

Η εργασία με τα checkbox γίνεται επίσης με παρόμοια αρχή, μόνο που αντί για το χαρακτηριστικό value ορίζουμε το χαρακτηριστικό checked. Εάν σε αυτό το χαρακτηριστικό περάσουμε true - τότε το checkbox θα είναι επιλεγμένο, ενώ εάν false - δεν θα είναι επιλεγμένο:

function App() {
	return <div>
		<input type="checkbox" checked={true}  /> επιλεγμένο
		<input type="checkbox" checked={false} /> μη επιλεγμένο
	</div>;
}

Συνήθως στο χαρακτηριστικό checked περνάμε state, που περιέχει λογική τιμή:

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

Όπως και στην εργασία με inputs, εάν ορίσουμε άκαμπτα την τιμή του χαρακτηριστικού checked - η κατάσταση του checkbox δεν θα μπορεί να αλλάξει. Για σωστή λειτουργία θα αλλάζουμε κατά την αλλαγή του checkbox το state του στην αντίθετη τιμή του:

function App() {
	const [checked, setChecked] = useState(true);
	
	function handleChange() {
		setChecked(!checked); // αντιστρέφουμε το state
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={handleChange} />
	</div>;
}

Μπορούμε να απλοποιήσουμε:

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

Ας εμφανίσουμε την κατάσταση του checkbox σε μια παράγραφο, χρησιμοποιώντας τον τριαδικό τελεστή:

function App() {
	const [checked, setChecked] = useState(true);
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<p>κατάσταση: {checked ? 'επιλεγμένο' : 'μη επιλεγμένο'}</p>
	</div>;
}

Δίνεται ένα checkbox, ένα κουμπί και μια παράγραφος. Με κλικ στο κουμπί, εάν το checkbox είναι επιλεγμένο, εμφανίστε στην παράγραφο κείμενο χαιρετισμού με τον χρήστη, ενώ εάν δεν είναι επιλεγμένο - κείμενο αποχαιρετισμού.

Με τρία checkbox ζητήστε από τον χρήστη να επιλέξει τις γλώσσες που γνωρίζει: html, css και js. Το αποτέλεσμα της επιλογής για κάθε γλώσσα εμφανίστε σε ξεχωριστές παραγράφους.