React - Initial error in the checked Switch property (React-Switchery)

Question

I’m using the library’s Switch component React-Switchery in the React, on a work project. I used it on several screens without any problem, but in a specific screen the following occurs: even with the property "checked" being initialized with true value, the component does not appear as checked. And when you click on it for the first time, the visual state does not change (the change event is called normally, setting prop to false - in this case it is normal that the visual does not change, the problem is only with the initial visual status). From the second click, everything happens as expected.

P.S.: this is a screen that shows the details of a "client". Status 1 is for active, and 0 is for inactive.

Change event:

const onStatusChange = (checked: boolean) => {
    let cli: IClientDto = {...client, Status: checked ? 1 : 0}
    setClient(cli)
    setClientStatus(checked ? 1 : 0) // essa é a setagem importante nesse caso
  }

Switch component of "Active/Inactive":

<Switch 
  checked={clientStatus === 1}
  options={{
    color: '#00b0eb'
  }}
  onChange={checked => onStatusChange(checked)}
/>

Declaration of const clientStatus and set moment as true (client. Status is 1)

const [clientStatus, setClientStatus] = useState<number>(0)

useEffect(() => {
var pClient = Data.get<IClientDto>(`api/management/client/${Id}`)
...
Promise.all([pClient, ...]).then(
([client, ...]) => {
  ...
  setClientStatus(client.Status)
})
}, [])

Update: new unsuccessful attempts at problem resolution

Using a Boolean const instead of the numeric for switch state control

const [active, setActive] = useState<boolean>(false)

useEffect(() => {
var pClient = Data.get<IClientDto>(`api/management/client/${Id}`)
...
Promise.all([pClient, ...]).then(
([client, ...]) => {
  ...
  setActive(client.Status == 1)
})
}, [])

const onStatusChange = (checked: boolean) => {
  let cli: IClientDto = {...client, Status: checked ? 1 : 0}
  setClient(cli)
  setActive(checked)
}

<Switch 
  checked={active}
  options={{
    color: '#00b0eb'
  }}
  onChange={checked => onStatusChange(checked)}
/>

Keeping the boolean const in control, but treating the checked prop as "hardcoded" (two attempts)

{ active
   ? <Switch 
       checked={true}
       options={{
         color: '#00b0eb'
       }}
       onChange={checked => onStatusChange(checked)}
     />
   : <Switch 
       checked={false}
       options={{
         color: '#00b0eb'
       }}
       onChange={checked => onStatusChange(checked)}
     />
}

{ active
   ? <Switch 
       checked
       options={{
         color: '#00b0eb'
       }}
       onChange={checked => onStatusChange(checked)}
     />
   : <Switch 
       options={{
         color: '#00b0eb'
       }}
       onChange={checked => onStatusChange(checked)}
     />
}

If anyone can help me solve this error, I’d appreciate it.:P

Answer 1

Well, you can’t be sure without having the jsx here, but looking at your code and their lib, and the fact that your switch Component works in other cases, and it gives the toggle correctly...etc

const [clientStatus, setClientStatus] = useState<number>(0)

useEffect(() => {
var pClient = Data.get<IClientDto>(`api/management/client/${Id}`)
...
Promise.all([pClient, ...]).then(
([client, ...]) => {
  ...
  setClientStatus(client.Status)
})
}, [])

your problem is probably there, note that your state that stores the checked value of the switch comes from a precedent... ie it takes a while for it to have its value changed and when it is changed on account of your Switch has already been reengineered with the initial value of 0, it is disabled...

That being the problem, what you can do is place a loading while performing the call, and only re-enter the Switch when you finish loading.