vendredi 19 juin 2020

cannot check checkbox in react with redux

I am saving the form data in react to redux store and every input works fine except the checkbox. The problem is that checkbox never shows tick mark but redux-logger shows that the state of the checkbox has been changed in the state. Below is my checkbox

<Control.checkbox model="agree" name="agree"
      className="form-check-input" 
      changeAction={this.changeAction} defaultChecked={this.props.fields.agree}
      updateOn="toggle"
      /> {' '}
<strong>May we contact you?</strong>

this.props.fields.agree gives the current status of the checkbox tken from redux store. Below is the reducer:

const InitialFeedback={
    firstname: 'Vipul',
    lastname: 'Tyagi',
    telnum: '12345',
    email: 'vipultyagi629@gmail.com',
    agree: true,
    contactType: 'Email',
    message: 'Hello'
};

export const formsData=(state=InitialFeedback,action)=>{
    switch(action.type){
        case 'CHANGE_FIELD':
                return {...state, [action.payload.name]: action.payload.value};
        default:
            return state
    }
}

Below is the changeAction method:

changeAction(model, value){
        console.log(typeof(value));
            this.props.dispatch({type:'CHANGE_FIELD',payload:{name: model, value: value}});
    }

The checkbox indeed respond to tick but doesn't shows tick mark. What mistake I am doing?

Please help me to find the problem!!

EDIT I have just checked that whatever the initial state of checkbox is, it always remains same. I mean if initially in store I set agree to true then the checkbox starts showing tick mark, but on clicking on the checkbox, the tick mark doesn't goes off. Similar is the for the case when initial state is false.




Aucun commentaire:

Enregistrer un commentaire