Using StepZilla, I'm not able to jump on other step...I'm not using any browser session, here I'm using redux store.
import React from 'react';
import StepZilla from 'react-stepzilla';
import ThankyouStep from './ThankyouStep.js';
import Purchase from './PurchaseStep.js';
import Configure from './ConfigureStep.js';
import {connect} from 'react-redux'
import {selectMainWizardStep} from '../../Actions/WizardActions'
require('../../styles/css/Wizard.css');
class MainWizard extends React.Component {
render() {
const steps =
[
{ name: 'Purchase', component: <Purchase /> },
{ name: 'Configure', component: <Configure organizationId = "121334-11-0000000000000" /> },
{ name: 'Thank You', component: <ThankyouStep /> },
];
Here after successful Purchase tab filling, I want that to jump on Configure tab. But that jumping is not happening. Here I've commented two lines because that is using browser session. Using browser session I was able to jump to configure step. But the redux state is getting lost because of page refresh. Thats why I used redux store, but I'm not able to jump on configure page.
return (
<article className='step-progress'>
<StepZilla
steps={steps}
preventEnterSubmission={true}
nextTextOnFinalActionStep={'Save'}
hocValidationAppliedTo={[3]}
//startAtStep={window.sessionStorage.getItem('step') ? parseFloat(window.sessionStorage.getItem('step')) : 0}
startAtStep = {this.props.Wizard.selectedWizradStep}
//onStepChange={(step) => window.sessionStorage.setItem('step', step)}
onStepChange = {(step) =>this.props.selectMainWizardStep(step)}
showNavigation={false}
/>
</article>
);
}
}
function mapStateToProps(state) {
return {
Wizard: state.Wizard
};
}
const mapDispatchToProps = {
selectMainWizardStep
};
export default connect(mapStateToProps, mapDispatchToProps)(MainWizard);