Redirect to another screen on the second step of the form

Question

I have a form in my home page which is InstantQoute. So when the user continues on the form, I want to show the rest of the form in new page. So here is my parent form:

import React, { Component } from "react";
import Checkout from "../screens/Checkout";
import InstantQuote from "./InstantQuote";

export class UserForm extends Component {
  state = {
    step: 1,
    zipFrom: "",
    zipTo: "",
    vehicleYear: "",
    vehicleMake: "",
    vehicleModel: "",
  };

  // Proceed to next step
  nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1,
    });
  };

  // Go back to prev step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1,
    });
  };

  // Handle fields change
  handleChange = (input) => (e) => {
    this.setState({ [input]: e.target.value });
  };

  render() {
    
    const { step } = this.state;
    const {
      zipFrom,
      zipTo,
      vehicleYear,
      vehicleMake,
      vehicleModel,
    } = this.state;
    const values = {
      zipFrom,
      zipTo,
      vehicleYear,
      vehicleMake,
      vehicleModel,
    };

    switch (step) {
      case 1:
        return (
          <InstantQuote
            nextStep={this.nextStep}
            handleChange={this.handleChange}
            values={values}
          />
        );
      case 2:
        return <Checkout />;
      default:
        return "Unknown step";
    }
  }
}

export default UserForm;

So like I said, InstantForm is a form in home page on the header. is actually a new screen. Like this it actually shows the whole screen inside the header. So could you give me an advice how I can handle the input value and at the same time redirect to another page?

Thanks!

Answer 1

You can use ternary operators to conditionally render the components. As well, for your nextStep and prevStep functions, see below implementation, you can read more about this on the official docs here. You can also pass down the state directly as props to your <InstantQuote /> component since it seems to require most of it, feel free to change this if you wish.

import React, { Component } from "react";
import Checkout from "../screens/Checkout";
import InstantQuote from "./InstantQuote";

export class UserForm extends Component {
    state = {
        step: 1,
        zipFrom: "",
        zipTo: "",
        vehicleYear: "",
        vehicleMake: "",
        vehicleModel: "",
    };

    // Proceed to next step
    nextStep = () => this.setState(prevState => ({step: prevState.step + 1}));

    // Go back to prev step
    prevStep = () => this.setState(prevState => ({step: prevState.step - 1}));

    // Handle fields change
    handleChange = (input) => (e) => {
        this.setState({ [input]: e.target.value });
    };

    render() {
        return (
            step == 1 ?
                <InstantQuote
                    nextStep={this.nextStep}
                    handleChange={this.handleChange}
                    values={this.state}
                /> :
                step == 2 ?
                    <Checkout />
                    : <p>Unknown step</p>
        )
    }
}

export default UserForm;