Hey everyone,

I am trying to build a wizard form with createContext and useState.

My question is how would you/-I tackle in this case the process of going back and forth through the form wizard?

From my understanding I would create a stepValue state as shown in my snippet and use this to go through the steps of the form wizard?

Also did I do this on the right way regarding using the context providers?

'use client';

import { createContext, useState } from 'react';

import StepOne from './step/one/page';
import StepTwo from './step/two/page';

// constructing onboard provider
const OnboardContext = createContext(null);

// constructing step provider
const StepContext = createContext(null);

// Somehow change stepValue with functions to move between pages?

export default function Onboard() {
  // constructing state for formValue(s) & stepValue(s)
  const [formValue, setFormValues] = useState(null);

  // constructing state for formValue(s) & stepValue(s)
  const [stepValue, setStepValues] = useState(null);

  return (
    <OnboardContext.Provider value={{ formValue, setFormValues }}>
      <StepContext.Provider value={{ stepValue, setStepValues }}>
        <StepOne />
        <StepTwo />
      </StepContext.Provider>
    </OnboardContext.Provider>
  );
}

Thank you so much.

Please let me know if you need more information!