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:

jsxfunction 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:

jsxfunction 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:

jsxfunction 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:

jsxfunction 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:

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