He usado la casilla de verificación en mi aplicación de reacción. No sé por qué no se marca/desmarca al hacer clic. Estoy usando Hashmap para obtener verdadero/falso y pasar lo mismo al atributo marcado.

En el siguiente código, la variable "checkBoxSelectedHash" es un mapa hash que tiene un valor verdadero/falso.

Nota: Verifiqué la consola de la variable "checkBoxSelectedHash" y también se está cambiando correctamente, pero no sé por qué no se refleja en la casilla de verificación.

 <tbody> {reservationSourceDetail ? reservationSourceDetail.map((value, index) => ( <tr key={index}> <td>{value.ota_name}</td> {rateCodeDetail ? rateCodeDetail.map((val) => ( <td style={{ textAlign: "center" }}> <input className="form-check-input" type="checkbox" checked={checkBoxSelectedHash[value.ota_id+"_"+val.name]} onChange={() => handleCheckBox(value.ota_id, val.name)} /> </td> )) : ""} </tr> )) : "" } </tbody>

Para cambiar la función handleCheckBox a continuación:

 const handleCheckBox = (ota_id, rate_code_name) => { let temp_checkBoxSelectedHash = checkBoxSelectedHash; temp_checkBoxSelectedHash[ota_id+"_"+rate_code_name] = !temp_checkBoxSelectedHash[ota_id+"_"+rate_code_name]; setCheckBoxSelectedHash(temp_checkBoxSelectedHash); }