Tengo un formulario, cuyo objetivo es editar los derechos de acceso para un usuario. EL problema consiste en que cuando traigo los datos de una API (la cual funciona correctamente y está hecha en PHP) los datos de cada uno de los campos que van a los checkbox son 1 y 0. Dónde 1 es verdadero y 0 es falso. ¿Qué tengo que hacer para que en la interfaz al cargar me haga el check automáticamente al cargar los datos?, o bien, ¿Alguna recomendación de lo que tengo que hacer?.
Código:
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
const Editarusuarios = () => {
const { id } = useParams();
useEffect(() => {
const datosuser={Id_usuario:sessionStorage.getItem("Iduser")};
fetch("http://localhost/API/Catalogos/Usuarios/SP_Verificar_DerechoXIDUsuario.php",{
method:"POST",
body:JSON.stringify(datosuser)
})
.then(respuesta=>respuesta.json())
.then((datosRespuesta)=>{
let Acceso = datosRespuesta[0]["Cat_usuarios"];
switch (Acceso) {
case "1":
try {
///----Ver el usuario X ID al que se le va modificar
fetch("http://localhost/API/Catalogos/Usuarios/SP_Ver_Usuario_XID.php"+"?Id="+ id)
.then(respuesta=>respuesta.json())
.then((respuesta)=>{
nicknamechange(respuesta[0].Nickname_usuario);
nomcompchange(respuesta[0].Nomcom);
clavechange(respuesta[0].clave);
setCatusers(respuesta[0].Cat_usuarios);
setCatenfer(respuesta[0].Cat_enfermedades);
setCatenfed(respuesta[0].Cat_entidad_fed);
setCatespecia(respuesta[0].Cat_especialidades);
setCatesta(respuesta[0].Cat_estatus);
setCatfampacient(respuesta[0].Cat_familiar_paciente);
setCatdetfampac(respuesta[0].Cat_detalle_familiar_paciente);
setCatfamperso(respuesta[0].Cat_familiar_personal);
setCatdetfamperso(respuesta[0].Cat_detalle_familiar_personal);
setCatgen(respuesta[0].Cat_genero);
sethistrialmed(respuesta[0].Historial_medico);
setCatmun(respuesta[0].Cat_municipio);
setCatocup(respuesta[0].Cat_ocupacion);
setCatpacient(respuesta[0].Cat_paciente);
setCatpartescuerp(respuesta[0].Cat_partes_cuerpo);
setCatpersonal(respuesta[0].Cat_personal);
setCatprocquir(respuesta[0].Cat_procedimiento_quir);
setCatsuc(respuesta[0].Cat_Sucursal);
setCattipofam(respuesta[0].Cat_tipo_familiares);
}
)
.catch(console.log)
} catch (error) {
console.log(error);
}
break;
case "0":
alert("No tiene derecho a la página.");
window.location.href = "/Home";
break;
case null:
alert("No tiene derecho a la página.");
window.location.href = "/Home";
break;
}
}
)
.catch(console.log)
}, []);
const [txtnomcomp, nomcompchange]=useState("");
const [txtnickname, nicknamechange]=useState("");
const [txtclave, clavechange]=useState("");
const [checkcatuser, setCatusers]=useState("");
const [checkcatenfer, setCatenfer]=useState("");
const [checkcatentfed, setCatenfed]=useState("");
const [checkcatespe, setCatespecia]=useState("");
const [checkcatestatus, setCatesta]=useState("");
const [checkcatfampac, setCatfampacient]=useState("");
const [checkcatdetfampac, setCatdetfampac]=useState("");
const [checkcatfamper, setCatfamperso]=useState("");
const [checkcatdetfamper, setCatdetfamperso]=useState("");
const [checkcatgen, setCatgen]=useState("");
const [checkhistmed, sethistrialmed]=useState("");
const [checkcatmun, setCatmun]=useState("");
const [checkcatocup, setCatocup]=useState("");
const [checkcatpac, setCatpacient]=useState("");
const [checkcatpartcuerp, setCatpartescuerp]=useState("");
const [checkcatpersonal, setCatpersonal]=useState("");
const [checkcatprocquir, setCatprocquir]=useState("");
const [checkcatsuc, setCatsuc]=useState("");
const [checkcattipfam, setCattipofam]=useState("");
const handlecheckChangecatuser=(e)=>{
const checkcatuser = e.target.checked;
if(checkcatuser){
setCatusers(1);
//console.log(checkcatuser);
checkcatuser=true;
}
else
{
setCatusers(0);
checkcatuser=false;
//console.log(checkcatuser);
}
}
const handlecheckChangecatenfer=(e)=>{
const checkcatenfer = e.target.checked;
if(checkcatenfer)
{
setCatenfer(1);
checkcatenfer=true;
}
else
{
setCatenfer(0);
checkcatenfer=false;
}
}
const handlecheckChangecatentfed=(e)=>{
const checkcatentfed = e.target.checked;
if(checkcatentfed)
{
setCatenfed(1);
}
else
{
setCatenfed(0);
}
}
const handlecheckChangeCatespecia=(e)=>{
const checkcatespe = e.target.checked;
if(checkcatespe)
{
setCatespecia(1);
}
else
{
setCatespecia(0);
}
}
const handlecheckChangeCatesta=(e)=>{
const checkcatestatus = e.target.checked;
if(checkcatestatus)
{
setCatesta(1);
}
else
{
setCatesta(0);
}
}
const handlecheckChangeCatfampacient=(e)=>{
const checkcatfampac = e.target.checked;
if(checkcatfampac)
{
setCatfampacient(1);
}
else
{
setCatfampacient(0);
}
}
const handlecheckChangeCatdetfampac=(e)=>{
const checkcatdetfampac = e.target.checked;
if(checkcatdetfampac)
{
setCatdetfampac(1);
}
else
{
setCatdetfampac(0);
}
}
const handlecheckChangeCatfamperso=(e)=>{
const checkcatfamper=e.target.checked;
if(checkcatfamper)
{
setCatfamperso(1);
}
else
{
setCatfamperso(0);
}
}
const handlecheckChangeCatdetfamperso=(e)=>{
const checkcatdetfamper=e.target.checked;
if(checkcatdetfamper)
{
setCatdetfamperso(1);
}
else
{
setCatdetfamperso(0);
}
}
const handlecheckChangeCatgen=(e)=>{
const checkcatgen=e.target.checked;
if(checkcatgen)
{
setCatgen(1);
}
else
{
setCatgen(0);
}
}
const handlecheckthistrialmed=(e)=>{
const checkhistmed=e.target.checked;
if(checkhistmed)
{
sethistrialmed(1);
}
else
{
sethistrialmed(0);
}
}
const handlecheckCatmun=(e)=>{
const checkcatmun=e.target.checked;
if(checkcatmun)
{
setCatmun(1);
}
else
{
setCatmun(0);
}
}
const handlecheckCatocup=(e)=>{
const checkcatocup=e.target.checked;
if(checkcatocup)
{
setCatocup(1);
}
else
{
setCatocup(0);
}
}
const handlecheckCatpacient=(e)=>{
const checkcatpac=e.target.checked;
if(checkcatpac)
{
setCatpacient(1);
}
else
{
setCatpacient(0);
}
}
const handlecheckCatpartescuerp=(e)=>{
const checkcatpartcuerp=e.target.checked;
if(checkcatpartcuerp)
{
setCatpartescuerp(1);
}
else
{
setCatpartescuerp(0);
}
}
const handlecheckCatpersonal=(e)=>{
const checkcatpersonal=e.target.checked;
if(checkcatpersonal)
{
setCatpersonal(1);
}
else
{
setCatpersonal(0);
}
}
const handlecheckCatprocquir=(e)=>{
const checkcatprocquir=e.target.checked;
if(checkcatprocquir)
{
setCatprocquir(1);
}
else
{
setCatprocquir(0);
}
}
const handlecheckCatsuc=(e)=>{
const checkcatsuc=e.target.checked;
if(checkcatsuc)
{
setCatsuc(1);
}
else
{
setCatsuc(0);
}
}
const handlecheckCattipofam=(e)=>{
const checkcattipfam=e.target.checked;
if(checkcattipfam)
{
setCattipofam(1);
}
else
{
setCattipofam(0);
}
}
const enviarDatos=(e)=>{
e.preventDefault();
const datosusuarios={
Iduser:id,
nickname:txtnickname,
Cat_usuarios:checkcatuser,
Cat_enfermedades:checkcatenfer,
Cat_entidad_fed:checkcatentfed,
Cat_especialidades:checkcatespe,
Cat_estatus:checkcatestatus,
Cat_familiar_paciente:checkcatfampac,
Cat_detalle_familiar_paciente:checkcatdetfampac,
Cat_familiar_personal:checkcatfamper,
Cat_detalle_familiar_personal:checkcatdetfamper,
Cat_genero:checkcatgen,
Historial_medico:checkhistmed,
Cat_municipio:checkcatmun,
Cat_ocupacion:checkcatocup,
Cat_paciente:checkcatpac,
Cat_partes_cuerpo:checkcatpartcuerp,
Cat_personal:checkcatpersonal,
Cat_procedimiento_quir:checkcatprocquir,
Cat_Sucursal:checkcatsuc,
Cat_tipo_familiares:checkcattipfam,
Id_usuario:sessionStorage.getItem("Iduser")};
console.log(datosusuarios);
}
return (
<div className="card">
<div className="card-header">
Editar Usuario
</div>
<div className="card-body">
<form id="webFrmEditarPersonal" onSubmit={enviarDatos}>
<div className="form-group">
<label htmlFor="">ID:</label>
<input type="text" value={id || ''} name="txtidpersonal" id="txtidpersonal" className="form-control" aria-describedby="helpId" size={50} placeholder="Teclea nombre del personal" required readOnly></input>
</div>
<div className="form-group">
<label htmlFor="">Nombre completo con especialidad:</label>
<input type="text" onChange={e=>nomcompchange(e.target.value)} value={txtnomcomp || ''} name="txtnomcomp" id="txtnomcomp" className="form-control" aria-describedby="helpId" size={50} placeholder="Teclea nickname del usuario" readOnly></input>
</div>
<div className="form-group">
<label htmlFor="">Nickname:</label>
<input type="text" onChange={e=>nicknamechange(e.target.value)} value={txtnickname || ''} name="txtnickname" id="txtnickname" className="form-control" aria-describedby="helpId" size={50} placeholder="Teclea nickname del usuario" required ></input>
</div>
<div className="form-group">
<label htmlFor="">Clave:</label>
<input type="password" onChange={e=>clavechange(e.target.value)} value={txtclave || ''} name="txtclave" id="txtclave" className="form-control" aria-describedby="helpId" size={50} placeholder="Teclea clave del usuario" required ></input>
</div>
<br></br><br></br>
<div className="form-group">
<label>
- Derechos de acceso de la cuenta -
</label>
</div>
<br></br>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatuser || ''} onClick={(e)=>{handlecheckChangecatuser(e);}} name="checkcatuser" id="checkcatuser" />
Catálogo de usuarios
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatenfer || ''} onClick={(e)=>{handlecheckChangecatenfer(e);}} name="checkcatenfer" id="checkcatenfer" />
Catálogo de enfermedades
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatentfed || ''} onClick={(e)=>{handlecheckChangecatentfed(e);}} name="checkcatentfed" id="checkcatentfed" />
Catálogo de entidadades federativas
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatespe || ''} onClick={(e)=>{handlecheckChangeCatespecia(e);}} name="checkcatespe" id="checkcatespe" />
Catálogo de especialidades
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatestatus || ''} onClick={(e)=>{handlecheckChangeCatesta(e);}} name="checkcatestatus" id="checkcatestatus" />
Catálogo de estatus
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatfampac || ''} onClick={(e)=>{handlecheckChangeCatfampacient(e);}} name="checkcatfampac" id="checkcatfampac" />
Catálogo de familiar de paciente
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatdetfampac || ''} onClick={(e)=>{handlecheckChangeCatdetfampac(e);}} name="checkcatdetfampac" id="checkcatdetfampac" />
Catálogo de detalle familiar paciente
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatfamper || ''} onClick={(e)=>{handlecheckChangeCatfamperso(e);}} name="checkcatfamper" id="checkcatfamper" />
Catálogo de familiar del personal
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatdetfamper || ''} onClick={(e)=>{handlecheckChangeCatdetfamperso(e);}} name="checkcatdetfamper" id="checkcatdetfamper" />
Catálogo de detalle familiar personal
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatgen || ''} onClick={(e)=>{handlecheckChangeCatgen(e);}} name="checkcatgen" id="checkcatgen" />
Catálogo de género
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkhistmed || ''} onClick={(e)=>{handlecheckthistrialmed(e);}} name="checkhistmed" id="checkhistmed" />
Historial médico
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatmun || ''} onClick={(e)=>{handlecheckCatmun(e);}} name="checkcatmun" id="checkcatmun" />
Catálogo de municipio
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatocup || ''} onClick={(e)=>{handlecheckCatocup(e);}} name="checkcatocup" id="checkcatocup" />
Catálogo de ocupación
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatpac || ''}onClick={(e)=>{handlecheckCatpacient(e);}} name="checkcatpac" id="checkcatpac" />
Catálogo de paciente
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatpartcuerp || ''} onClick={(e)=>{handlecheckCatpartescuerp(e);}} name="checkcatpartcuerp" id="checkcatpartcuerp" />
Catálogo de partes cuerpo
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatpersonal || ''} onClick={(e)=>{handlecheckCatpersonal(e);}} name="checkcatpersonal" id="checkcatpersonal" />
Catálogo de personal
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatprocquir || ''} onClick={(e)=>{handlecheckCatprocquir(e);}} name="checkcatprocquir" id="checkcatprocquir" />
Catálogo de procedimiento quirúrgico
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcatsuc || ''} onClick={(e)=>{handlecheckCatsuc(e);}} name="checkcatsuc" id="checkcatsuc" />
Catálogo de Sucursal
</label>
</div>
<div className="form-group">
<label>
<input type="checkbox" value={checkcattipfam || ''} onClick={(e)=>{handlecheckCattipofam(e);}} name="checkcattipfam" id="checkcattipfam" />
Catálogo de tipo familiares
</label>
</div>
<br></br>
<div className="input-group">
<span className="input-group-btn">
<button className="btn btn-success" type="submit" aria-label="">Guardar</button>
<Link to={"/listarusuarios"} className="btn btn-danger" type="button" aria-label="">Cancelar</Link>
<Link to={"/listarusuarios"} className="btn btn-warning" type="button" aria-label="" id="btnsalir" >Regresar al Listado</Link>
</span>
</div>
</form>
</div>
</div>
);
}
export default Editarusuarios;
He intentado verificar / conidiocnar un IF (cuando carga la información, pero, me marca errores porque francamente no sé como hacerlo bien), estoy seguro que esto puede ser muy sencillo, pero mi falta de conocimientos "no me deja ver la solución".
Gracias y saludos.