Comments (22)
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.
Related Issues (20)
- Props to steps HOT 2
- [BUG] stepsNavigation allows you jump past steps that need validation HOT 1
- Module not found: Error: Can't resolve 'promise' in ' HOT 1
- Validation in a functional component (when using React Hooks) HOT 23
- Hide Particular Step in Navigation bar HOT 1
- Separate step-bar and form component HOT 1
- Accessing the typed in info HOT 5
- [BUG] Navigation Bar is plain HTML (No customization) HOT 1
- Hide or Inactivate Steps HOT 2
- The ref is not working, also does not work in case of Redux HOT 1
- Default styling not coming HOT 3
- [Feature] How to make it to have vertical stepper HOT 2
- [BUG] Wrong class applied to progtrckr li HOT 2
- On click UI navigation on top get undefined value HOT 1
- Major Release v7 HOT 1
- [BUG] progtrckr not being added on <li> HOT 2
- Show Navigation step On Load and Show Activated step as selected Node
- [Bug]: Form Validation with formik
- [Request] Upgrade to React 18.2 HOT 2
- save on last step
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-stepzilla.