Trabajo con checkbox en React

El trabajo con checkbox también se realiza de manera similar, solo que en lugar del atributo value indicamos el atributo checked. Si pasamos true a este atributo, el checkbox estará marcado, y si pasamos false - no estará marcado:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> marcado
    <input type="checkbox" checked={false} /> no marcado
  </div>;
}

Normalmente al atributo checked se le pasa un estado que contiene un valor lógico:

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

Al igual que cuando se trabaja con inputs, si se establece rígidamente el valor del atributo checked - no se podrá cambiar el estado del checkbox. Para un funcionamiento correcto, al cambiar el checkbox cambiaremos su estado al valor opuesto al actual:

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

Podemos simplificar:

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

Mostremos el estado del checkbox en un párrafo, usando el operador ternario:

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