IsValidated not working with redux about react-stepzilla HOT 22 OPEN

I am using redux with react step zilla , i need to validate the steps.

• I added the IsValidated function to the step.
• I also followed the above suggestions but got this error.
  main.js:318 Uncaught TypeError: Cannot read property 'isValidated' of undefined
  could please help me out of this problem
  

from react-stepzilla.

Hi,
Sorry for the late response.
After facing this issue, I implemented it on my own using material design stepper.
For each component i've added export default connect(mapStateToProps, null, null, { withRef: true })
in order to have access to isValidated() method.

In order to execute this method you just need to call ..getWrappedInstance().isValidated()

So if I'm not mistaken, the fix should be in this part
`{
key: 'stepMoveAllowed',
value: function stepMoveAllowed() {
var skipValidationExecution = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

  var proceed = false;

  if (this.props.dontValidate) {
    proceed = true;
  } else {
    if (skipValidationExecution) {
      // we are moving backwards in steps, in this case dont validate as it means the user is not commiting to "save"
      proceed = true;
    } else if (this.isStepAtIndexHOCValidationBased(this.state.compState)) {
      // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as a HOC,
      // so use hocValidationAppliedTo to determine if this step needs the aync validation as per react-validation-mixin interface
      proceed = this.refs.activeComponent.refs.component.isValidated();
    } else if (Object.keys(this.refs).length == 0 || typeof this.refs.activeComponent.isValidated == 'undefined') {
      // if its a form component, it should have implemeted a public isValidated class (also pure componenets wont even have refs - i.e. a empty object). If not then continue
      proceed = true;
    } else {
      // user is moving forward in steps, invoke validation as its available
      proceed = this.refs.activeComponent.isValidated();
    }
  }

  return proceed;
}`

from react-stepzilla.

It would be great to provide a way to validate high order components, or probably accept a callback as prop.

<StepZilla
     shouldProceed={(index, component) => this.validateStep(index)} />

I ended up exporting the component with the option {withRef: true}, and calling component.getWrappedInstance().isValidated()

magnifi@eb3687e#diff-2770833218bd08d0b5d0c0157cfef742R315

from react-stepzilla.

I think I'm experiencing this problem as well, since I'm using React with Redux. I'm passing react-stepzilla a Semantic UI Grid component, and it pops up this lovely error message:

Uncaught TypeError: Cannot read property 'isValidated' of undefined

which pretty much breaks everything.

I have not tried magnifi's suggested changes above because it would need to be repeated on each computer after setting up the project again, and that's rather tedious and error-prone in a team based project.

from react-stepzilla.

@newbreedofgeek ok I will check tonight

from react-stepzilla.

i had the same issue, but without using any HOC like redux, my component in step 4 was just a plain class component, somehow it was still dropping in HOC isValidated part in if statement in step 4. So I've changed the part starting with line 261 as follows to fix it:

      } else if (this.isStepAtIndexHOCValidationBased(this.state.compState)) {
        // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as a HOC,
        // so use hocValidationAppliedTo to determine if this step needs the aync validation as per react-validation-mixin interface
        if (!!this.refs.activeComponent.refs.component) {
          proceed = this.refs.activeComponent.refs.component.isValidated();
        } else {
          proceed = this.refs.activeComponent.isValidated();
        }
      } else if (

from react-stepzilla.

Hi running into the same issue..

from react-stepzilla.

Hey i am having the same problem. Anybody has a fix for this? Thanks

from react-stepzilla.

Yes, I suspect the higher order redux wrapper is abstracting the steps further. I had the same issue after integrating react-validation-mixin and had to write conditional checks whenever I was binding properties to the react components. Has someone been able to get this working? I'd like to get StepZilla working with redux.

from react-stepzilla.

@zeel if you have some time would appreciated if you can try and reproduce this with redux and see if you can fix it. I'd really like to resolve this if it's an issue, as redux is probably what most ppl use for state.

from react-stepzilla.

@newbreedofgeek I think solution provided by @magnifi is correct.

There is another way to hoist instance method of the component to container component, but it's not approved by Facebook authors.

reduxjs/react-redux#270 (comment)

@magnifi can you create pull request? cc: @newbreedofgeek

from react-stepzilla.

forced the issue with this

else if(typeof this.props.steps[this.state.compState].component.type.prototype.isValidated !== 'undefined') { proceed = this.props.steps[this.state.compState].component.type.prototype.isValidated(); }

from react-stepzilla.

@ahmetcetin even your solution is not working. @newbreedofgeek How do I pass { withRef: true } to connect function?

from react-stepzilla.

Facing the same issue with even the simple code:

<div className='step-progress' style={style}> <StepZilla steps={steps} nextButtonCls='btn btn-prev btn-primary btn-md pull-right' backButtonCls='btn btn-next btn-primary btn-md pull-left' showNavigation={true} showSteps={true} hocValidationAppliedTo={[0]} preventEnterSubmission={true} prevBtnOnLastStep={true} /> </div>

@newbreedofgeek This is a really nice and simple component for newbies like me to use. So, it would be really appreciated if a solution is provided to this issue.

from react-stepzilla.

React-redux now is in version ^5.0.7, @realdubb your edit is not working on that version or I am just doing it wrong, isValidated still not working with redux connect. Anyone?? Also your edit is not yet reflected on stepzilla current version?

from react-stepzilla.

@jcsabado no, my changes have not been merged to current version. Haven't had the chance to add tests before requesting PR

The fix works with react-redux ^5.0.7 - I've added a test showing it working. Check out the component in Step3b and specifically line 159 - you need component to export withRef: true otherwise it won't work
https://github.com/realdubb/react-stepzilla/blob/reduxIsValidated/src/examples/Step3b.js#L159

from react-stepzilla.

@realdubb Thanks dude.. . I did wrong on my code hahaha I use "hocValidationAppliedTo={[0,1, 2, 3]}" then edit the main.js added these code
} else if (this.isStepAtIndexHOCValidationBased(this.state.compState)) { // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as a HOC, // so use hocValidationAppliedTo to determine if this step needs the aync validation as per react-validation-mixin interface // Hack edit let { wrappedInstance } = this.refs.activeComponent if(wrappedInstance){ proceed = wrappedInstance.isValidated(); } else { proceed = this.refs.activeComponent.refs.component.isValidated(); }
it's working though, can you do a test with my code and let me know your insight about it?

from react-stepzilla.

So, any news about this problem?
Actually I am not using isValidated(), just this:

const steps = [
  { name: 'Step 1', component: <div>Step1</div> },
  { name: 'Step 2', component: <div>Step2</div> },
];

const SteppingComponent = () => (
  <Fragment>
    <div className="step-progress">
      <StepZilla steps={steps} />
    </div>
  </Fragment>
);

I have redux installed obviously and I have the above problem.

from react-stepzilla.

i had the same issue, but without using any HOC like redux, my component in step 4 was just a plain class component, somehow it was still dropping in HOC isValidated part in if statement in step 4. So I've changed the part starting with line 261 as follows to fix it:

      } else if (this.isStepAtIndexHOCValidationBased(this.state.compState)) {
        // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as a HOC,
        // so use hocValidationAppliedTo to determine if this step needs the aync validation as per react-validation-mixin interface
        if (!!this.refs.activeComponent.refs.component) {
          proceed = this.refs.activeComponent.refs.component.isValidated();
        } else {
          proceed = this.refs.activeComponent.isValidated();
        }
      } else if (

I'm experiencing this as well . My Step 4 is Plain not deplaying the page content but step 5 displays . is there a configuration i've to alter . immediate response would be appreciated Please

from react-stepzilla.

does #134 fix this?

from react-stepzilla.

@newbreedofgeek As far as I'm aware, your fix still doesn't cover when passing a HOC (e.g. redux connected) as a step.

I'm still getting Uncaught TypeError: Cannot read property 'isValidated' of undefined

from react-stepzilla.

Any updates regarding this issue, I have the same issue when I use withTranslation HOC (react-i18next)

from react-stepzilla.