Multi Step Form in React Not Retaining Values After clicking 'Continue' or 'Back Button'

Viewed 275

This multi-step form isn't retaining any of the input values when the 'back' button is clicked. How do I retain the form information when moving back or forward through the steps until the data is submitted?

render() {
const {
  firstName,
  lastName,
  email,
  phone,
  businessName,
  businessDescription,
  businessWebsite,
  businessType,
  streetAddress,
  step,
} = this.state;

const values = {
  firstName,
  lastName,
  email,
  phone,
  businessName,
  businessDescription,
  businessWebsite,
  businessType,
  streetAddress,
};

const formComponentDict = {
  1: (
    <FormPersonalDetails
      nextStep={this.nextStep}
      handleChange={this.handleChange}
      values={values}
    />
  ),
  2: (
    <FormBusinessDetails
      nextStep={this.nextStep}
      prevStep={this.prevStep}
      handleChange={this.handleChange}
      values={values}
    />
0 Answers
Related