#StackBounty: #reactjs #redux IsValidated not working with redux in react stepzilla

Bounty: 50

I developed the multistep registration form using react-stepzilla.I am using react and redux in this registration.

I need to validate the steps and i followed these steps to add the validation to the steps

  1. I added the isValidated function to the step.

  2. It is working in react but it is not working in redux with react may be react-stepzilla is problem with HOC.

  3. I followed the react-stepzilla module git solutions but i got the error
    “main.js:318 Uncaught TypeError: Cannot read property ‘isValidated’ of undefined”

//React stepzilla main component

const steps = [
    { name: 'step1', component: <RegistrationType /> },
    { name: 'step2', component: <PersonalDetails /> },
    { name: 'step3', component: <ContactDetails /> }
]

class MultiStep extends Component {
    render() {
        return (
            <Fragment>
                <h1 className="page-header">Register for New Account</h1>
                <StepZilla
                    steps={steps}
                    stepsNavigation={true}
                    nextButtonText='Save and Continue'
                    backButtonText='Back'
                    nextButtonCls="btn btn-warning active pull-right mr-0"
                    backButtonCls="btn btn-primary pull-left ml-25"
          hocValidationAppliedTo= {[0,1, 2]}
                />

            </Fragment>
        );
    }
}
//Step1 Component:


// Checking the validation for registration
    isValidated(){
        alert("checking isValidated calling")
        return this.state.count > 2
    }
  
 // connecting with redux 
 export default  connect((state) => ({register_reducer: state.register_reducer.register_user}),{saveUser})(Step1); //This is not working and getting the error 
 
 //connecting without redux
 export default Step1 // this is working and checking the validation part

I got the error “Cannot read property ‘isValidated’ of undefined” when we are connected with redux.
enter image description here

Please help me out of this problem.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.