Lavorare con le checkbox in React

Il lavoro con checkbox segue un principio simile, solo che invece dell'attributo value specifichiamo l'attributo checked. Se a questo attributo viene passato true - la checkbox sarà selezionata, mentre se false - non sarà selezionata:

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

Di solito all'attributo checked viene passato uno state, che contiene un valore booleano:

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

Proprio come quando si lavora con gli input, se si imposta rigidamente il valore dell'attributo checked - lo stato della checkbox non potrà essere cambiato. Per un funzionamento corretto, al cambiamento della checkbox, cambieremo il suo state con il valore opposto a quello corrente:

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

Possiamo semplificare:

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

Visualizziamo lo stato della checkbox in un paragrafo, usando l'operatore ternario:

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

Data una checkbox, un pulsante e un paragrafo. Al click sul pulsante, se la checkbox è selezionata, visualizza nel paragrafo un testo di saluto per l'utente, altrimenti un testo di commiato.

Con tre checkbox, chiedi all'utente di selezionare le lingue che conosce: html, css e js. Il risultato della selezione per ogni lingua visualizzalo in paragrafi separati.