Checkbox is not changing value dinamically

[JuanCAlpizar]

I have a simple login screen which has an implementation of this check box; the form has a username, password and remember password field (the checkbox), all of them retrieving their values from the component's state. The constructor initially sets the checkbox as false on the first run like this:

constructor(props){
    super(props);

    this.state = {
        username: '',
        password: '',
        remember_password: false
    }
}

Then inside componentWillMount the app checks on the internal storage for stored values for username, password and remember password. If there are stored values, it sets the state of each to the corresponding values, making a re render For testing purposes, I encapsulated the checkbox render inside a function called renderCheckbox which is called on the Login render method whenever the checkbox is being rendered and made a log with the state value passed:

{this.renderCheckbox(this.state.remember_password)}

The problem is when the app loads the username and the password get filled with the stored data, but the checkbox is still unchecked even when the stored value is set to true.

renderCheckbox = (checked) => {
    console.log("receiving checked as: ", checked);
    return (
        <CheckBox
            checkBoxColor='#d0d0d0'
            rightText="Remember Password"
            onClick={() => this.storeCredentials(checked)}
            isChecked={checked}
            rightTextStyle={{color: '#d0d0d0'}}
            style={{marginTop: 5, marginBottom: 15}}
        />
    );
}

As you can see it first receives the remember_password: false from the constructor on the state but then receives the true value from componentWillMount but it still shows unchecked on the screen. Am I missing something or is the component not capable of handling such situations?

Thanks

[JuanCAlpizar]

Additional information update: it looks like the problem comes when the component is updated from an async function, if I set remember_password to true directly on componentWillMount, it renders properly but if I set its state inside the async function that gets the values from the internal storage it fails to render the proper value.

As a side note, the exact same code works with other checkbox components.

Update: this is totally related to #9, if I set it up on my end it does render initially with the expected value, but I can't set it back to unchecked.

[ludashen]

me too

[ludashen]

i have the same problem

[jiawen-Bees360]

@JuanCAlpizar @ludashen go to it's source code, and delete it's constructor function. then change all this.state to this.props.

It's because the isChecked was pass to CheckBox as it's state, when you change isChecked value, it's not going to change CheckBox 's isChecked state.