Checkbox component does not have controlled state

[rayyan224]

The checkbox component should have a controlled state i.e props should directly control what the view is showing.
Here's an example where it doesn't, we want props and state to be tightly coupled in order to reduce memory leaks.

[surajgjadhav]

Hi,
I found the root cause of that issue and also observed checkbox is not behaving properly for "Box on by Default" story.

web3uiCheckbox-issue.mp4

This issue was happening. because, their is state issue in component itself.
We need to pass state variable to the checked prop instead of passing the argument variable.

web3uikit/packages/core/src/lib/Checkbox/Checkbox.tsx

Line 58 in c100f43

checked={checked}

this should be:

checked={isChecked}

should align with state variable instead of normal argument
and our checked argument variable is kind of initial value of checkbox. so, ideally we should remove it from control as we can't align it with state.

If this is accepted please assign this to me and I will raise PR for that.

Thanks

[surajgjadhav]

Hi @BillyG83 ,
Could you please confirm on this:

Hi, I found the root cause of that issue and also observed checkbox is not behaving properly for "Box on by Default" story.

web3uiCheckbox-issue.mp4
This issue was happening. because, their is state issue in component itself. We need to pass state variable to the checked prop instead of passing the argument variable.

web3uikit/packages/core/src/lib/Checkbox/Checkbox.tsx

Line 58 in c100f43

checked={checked}

this should be:

checked={isChecked}

should align with state variable instead of normal argument and our checked argument variable is kind of initial value of checkbox. so, ideally we should remove it from control as we can't align it with state.

If this is accepted please assign this to me and I will raise PR for that.

Thanks