surfer19

// views/Step2.jsx
import React from "react";

export const Step2 = ({ navigation }) => {
  const { previous } = navigation;
  const submitForm = (e) => {};

  return (
    <>
      <h3>Step 2</h3>

surfer19

// views/Step1.jsx
import React from "react";

export const Step1 = ({ navigation }) => {
  const { next } = navigation;
  const submitForm = () => {
    next();
  };
  return (
    <>

surfer19

// RegistrationFormStepper.jsx
import React from "react";
import { useStep } from "react-hooks-helper";
import { Step1 } from "./views/Step1";
import { Step2 } from "./views/Step2";

const steps = [{ id: "step1" }, { id: "step2" }];

export const RegistrationFormStepper = () => {
  const { step, navigation } = useStep({ initialStep: 0, steps });

surfer19

// views/Step2.jsx
import React, { useState, useContext } from "react";
import { GlobalContext } from "../context/global-context";

export const Step2 = ({ navigation }) => {
  const { previous } = navigation;
  const [state, dispatch] = useContext(GlobalContext);
  const [firstName, setFirstName] = useState(state.firstName || "");
  const [surname, setSurname] = useState(state.surname || "");
  const [submited, setSubmited] = useState(false);

surfer19

// views/Step1.jsx
import React, { useContext, useState } from "react";
import { GlobalContext } from "../context/global-context";

export const Step1 = ({ navigation }) => {
  const { next } = navigation;
  const [state, dispatch] = useContext(GlobalContext);
  const [email, setEmail] = useState(state.email || "");
  const [password, setPassword] = useState(state.password || "");

surfer19

// App.jsx
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.scss";
import { RegistrationFormStepper } from "./RegistrationFormStepper";
import { GlobalContextProvider } from "./context/global-context";

export default function App() {
  return (
    <div className="App mt-4">

surfer19

<GlobalContextProvider>{…components}</GlobalContextProvider>

surfer19

// global-context.jsx
export const GlobalContextProvider = (props) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <GlobalContext.Provider value={[state, dispatch]}>
      {props.children}
    </GlobalContext.Provider>
  );
};

surfer19

// context/global-context.jsx
export const reducer = (state, action) => {
  switch (action.type) {
    case "SAVE_LOGIN_INFO":
      return {
        ...state,
        email: action.email,
        password: action.password
      };
    case "SAVE_PERSONAL_INFO":

surfer19

import React from "react";
import { useStep } from "react-hooks-helper";
import { Step1 } from "./views/Step1";
import { Step2 } from "./views/Step2";

const steps = [{ id: "step1" }, { id: "step2" }];

export const RegistrationFormStepper = () => {
  const { step, navigation } = useStep({ initialStep: 0, steps });
  const props = { navigation };