Estoy configurando el estado de un conmutador MUI en función de la respuesta de una API. El campo Active en esta respuesta de la API determina si el Switch está marcado o no.
El interruptor se marca si el campo JSON es 1 y se desmarca si el campo es 0 . Cuando controlo o desmarco manualmente el interruptor, quiero reflejar esto en JSON cambiando el valor de Active a 1 o 0 .
const [checked, setChecked] = useState(true); const [details, setDetails] = useState(""); //This is where my API response is stored function ActivityStatusSwitch() { if (details.Active === 1) { return ( <FormControlLabel control={<Switch checked={checked} onChange={handleSwitchChange} />} label="Active" labelPlacement="start" /> ); } else return ( <FormControlLabel control={<Switch checked={checked} onChange={handleSwitchChange} />} label="Inactive" labelPlacement="start" /> ); } const handleSwitchChange = (e) => { setChecked(e.target.checked); setDetails((prev) => { return { ...prev, Active: e.target.value }; }); };Este es un breve ejemplo de mi JSON:
{ "Active": 1 }Siempre me ha resultado más fácil usar estados booleanos para situaciones como esta. Como ya está usando 1 y 0, eso es simplemente verdadero y falso.
Por lo tanto, puede hacer algo como esto si su campo Active es verdadero/falso en su lugar:
const handleSwitchChange = (e) => { setChecked(e.target.checked); setDetails((prev) => { return { ...prev, Active: !prev.Active }; }); };Si realmente insistes en usar 1 y 0, aún puedes lograr lo mismo con un condicional simple.
const handleSwitchChange = (e) => { setChecked(e.target.checked); setDetails((prev) => { return { ...prev, Active: mapActiveValue(prev.Active) }; }); }; const mapActiveValue = (val) => { return val === 0 ? 1 : 0 }