How to manage state in a signup flow (ReactJS) - reactjs

Question

So, I'm building a signup and payment flow using React/NextJS, AWS Cognito, and Stripe. I have created a class component to manage state and the overall flow with child components handling the individual steps. The problem I am having is managing the state so that each component can access the state and make changes to it as well as use functions that are in the parent component and not within the child components. Keep note that the child components are functional and not classes. Here is the flow step by step:
Parent Component
import React, { Component } from "react";
import Layout from "../../components/layouts/mainlayout/mainlayout";
//import { handleSubmit } from "../../components/auth/awshelper";
import { Auth } from "aws-amplify";
import FlowStep1 from "../../components/auth/clubflow/step1";
import FlowStep2 from "../../components/auth/clubflow/step2";
import FlowStep3 from "../../components/auth/clubflow/step3";
//import { Router } from "next/router";
const meta = {
title: "Join the club!",
description: "Sign up and enjoy the best travel experiences ever."
};
class ClubFlow extends Component {
state = {
firstname: "",
lastname: "",
username: "",
phonenumber: "",
password: "",
confirmpassword: "",
step: 1,
go: false,
plan: null,
member: false,
errors: {
cognito: null,
blankfield: false,
passwordmatch: false
}
};
/*Unnecessary functions:
getStripeFunc = func => {
return func;
};
*/
clearErrorState = () => {
this.setState({
errors: {
cognito: null,
blankfield: false,
passwordmatch: false
}
});
};
choosePlan = e => {
setState({ plan: e.target.value });
};
onInputChange = event => {
//const [firstname, setFirstname] = useState("");
this.setState({
[event.target.id]: event.target.value
});
document.getElementById(event.target.id).classList.remove("is-danger");
};
handleSubmit = async event => {
event.preventDefault();
// Form validation
this.clearErrorState();
const error = null; /*Validate(event, this.state)*/
if (error) {
console.log("an validation erreor was fired");
this.setState({
errors: { ...this.state.errors, ...error }
});
}
// AWS Cognito integration here
const { firstname, lastname, phonenumber, username, password } = this.state;
try {
const signUpResponse = await Auth.signUp({
username,
password,
attributes: {
name: firstname,
family_name: lastname,
phone_number: phonenumber
}
});
if (signUpResponse) {
this.setState({ step: 2, go: true });
}
} catch (error) {
let err = null;
!error.message ? (err = { message: error }) : (err = error);
this.setState({
errors: { ...this.state.errors, cognito: error }
});
}
};
//This function sets which plan the user selects. Eventually this value will be passed down to the checkout form as a prop.
goNext = async () => {
try {
if (this.state.step === 1) {
this.handleSubmit(event);
if (
this.state.step <
3 /*&&
this
.signUpResponse /*Remove the previous comment in order for the next button to work correctly.*/
) {
this.setState(state => ({
step: state.step + 1
}));
}
} else if (this.state.step === 2) {
this.setState(state => ({
step: state.step + 1
}));
} else {
this.getStripeFunc();
}
} catch (error) {
console.log("You have a problem");
}
};
goBack = () => {
if (this.state.step > 1) {
this.setState(state => ({
step: state.step - 1
}));
}
};
render() {
let stage;
if (this.state.step === 1) {
stage = (
<FlowStep1 state={this.state} onInputChange={this.onInputChange} />
);
} else if (this.state.step === 2) {
stage = <FlowStep2 state={this.state} choosePlan={this.choosePlan} />;
} else {
stage = <FlowStep3 state={this.state} />;
}
//console.log(this.state.plan);
return (
<Layout class={"ovh"} meta={meta}>
A user is able to signup and creates an account by entering their name, email, phone, and password.
import FormErrors from "../FormErrors";
import { Auth } from "aws-amplify";
import React, { Component } from "react";
/*import {
backspacerUP,
backspacerDOWN
} from "../../utilities/phonenumbervalidator";
const onKeyUp = backspacerUP;
const onKeyDown = backspacerDOWN;
Might need to use a plugin: https://www.npmjs.com/package/react-phone-input-auto-format*/
class FlowStep1 extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<section className="section auth">
<div className="container">
<h1>Register</h1>
<FormErrors /*formerrors={state.errors}*/ />
A user is able to choose a plan which needs to pass the plan that the user chooses onto step 3:
import React, { useState } from "react";
const FlowStep2 = (props) => {
const plan
const [plan, setPlan] = useState(0);
return (
<div className="mb-4">
<h2>this is what is in state:{plan}</h2>
<input
type="radio"
name="plan"
value="1"
readOnly
//checked={this.state.plan === 1}
onChange={() => setPlan(1)}
/>
<input
type="radio"
name="plan"
value="2"
readOnly
onChange={() => setPlan(2)}
className="ml-3"
/>
<input
type="radio"
name="plan"
value="3"
//checked={true}
onChange={() => setPlan(3)}
className="ml-3"
/>
</div>
);
};
export default FlowStep2;
A user is able to enter their credit card info and submit it. Once the charge is okay'd by stripe and charged based on the plan the user choosed in step two they will get a confirmation email and will be navigated to the welcome page. The selected plan will need to be eventually passed on to an express server that will handle the charge and pass it on to stripe for processing charging based on what plan they selected.
import ClubPayWrap from "../../payments/clubpaywrap";
const FlowStep3 = props => {
return (
<div>
<h2>Payment</h2>
<ClubPayWrap flowstate={props.state} />
</div>
);
};
export default FlowStep3;
Please, let me know if I need to give more detail.

Answer 1

For managing states in react based application there are different approaches. You need to store the logged in user data in a global store in which you can access in different routes and components.
The most used store manager to react is Redux.In the latest version, it provided some hooks. The redux hooks made it so easy to access to your store.
The next one is mobX. I personally haven't used it yet and I can not help you with that!
The other one is Context Api which is provided by react itself. React added some hooks to make it easy to use.
There is another technology provided for managing states in React called Rxjs which is a little bit different and maybe is not good for your case.
In the end I think number one is the perfect solution for you and then number 3.