React Stripe JS and React Stepper

Question

Hello guys I'm pretty new at React js and I just started using the react-stripe-js. My question is, is it possible to make stay the value in Stepper Elements in React Stepper after changing page? Your answers are very much appreciated.

Sample Design Stepper with Stipe Elements

class CheckoutForm extends React.Component {
handleSubmit = (ev) => {
    ev.preventDefault();
    this.props.stripe
        .createPaymentMethod('card')
        .then((payload) => {
            console.log('[pm]', payload)
    });

    this.props.stripe
        .createToken({type: 'card', name: 'Jenny Rosen'})
        .then((payload) => {
            console.log(payload)
    });

    this.props.stripe.createSource({
    type: 'card',
    owner: {
        name: 'Jenny Rosen',
    },
    });
};

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <CardSection />
      <button>Confirm order</button>
    </form>
  );
}
}

//CardSection.js
class CardSection extends React.Component {
 render() {
    return (
        <>
            <label>
            Name
            <input name="name" type="text" placeholder="Jane Doe" required />
            </label>
            <label>
                Card details

                <CardNumberElement style={{base: {fontSize: '18px'}}}/>
                <CardExpiryElement style={{base: {fontSize: '18px'}}} />
                <CardCVCElement style={{base: {fontSize: '18px'}}} />
            </label>
        </>
    );
  }
 }

Answer 1

The state is local to your component. Whatever logic you have in next() appears to be selectively rendering depending on which step the user has reached.

This is a problem because when the user moves to the next step, your state values is unmounted and destroyed and therefore loses its state.

The solution is to save values as a prop on your child component, and move the handleChange up into the parent component and have that as a prop on Child Component as well. Store values in the state of the parent component which doesn't unmount on change of step. In your parent component, put the handleChange event so it stores in the parent state.

Now, as the user moves to the next screen, you have safely stored the selected values in the parent state.