I'm a beginner, so I'm having some trouble with accessing and showing all values from a Wizard form before submitting the form. I'm trying to create a "preview component" that lets user check all values before s/he hits submit. This is my WIzardFormPreview component
import React from 'react';
import {Field, reduxForm} from 'redux-form';
import { Values } from 'redux-form-website-template';
import {connect} from "react-redux";
import validate from '../middleware/validate';
let WizardFormPreview = props => {
const {handleSubmit, pristine, previousPage, submitting} = props;
return (
<form onSubmit={handleSubmit} className="form-horizontal">
<div className="step-3">
<div>{familyFlag}</div>
<div>
<button type="button" className="previous" onClick={previousPage}>
Previous
</button>
<button type="submit" disabled={pristine || submitting}>Submit</button>
</div>
</div>
</form>
);
};
export default reduxForm({
form: 'wizard',
destroyOnUnmount: false,
forceUnregisterOnUnmount: true,
validate,
})(WizardFormPreview);
WizardFormPreview = connect(
state => ({
values: {
family : state.form.wizard.values.familyFlag
}
})
)(WizardFormPreview)
I'm getting "familyFlag is not defined" (which isn't supposed to be, as I understand) but I can't figure out how to make that available. FYI, the input familyFlag exists in the first step of the form.
How do I get all values from the wizard form and display it? Helps are appreciated.