How can I pass data in multi-step forms in NextJS?

Question

I have started using NextJS and React recently.

I am trying to implement the multi page forms in my app, but I don't know how can I persist and pass the form data from one page to another page.

There are many guidelines about using state management libraries and context apis but they all are either in reactjs or defines the use between different components.

My _app.js looks like this:

const AppComponent = ({ Component, pageProps, currentUser }) => {
  return (
    <div>
      <AppWrapper>
        <Header currentUser={currentUser} />
        <Component {...pageProps} />
      </AppWrapper>
    </div>
  );
};
AppComponent.getInitialProps = async (appContext) => {
  const client = buildClient(appContext.ctx);

  const { data } = await client.get('/api/client/currentuser');
  let pageProps = {};
  if (appContext.Component.getInitialProps) {
    pageProps = await appContext.Component.getInitialProps(appContext.ctx);
  }
  return {
    pageProps,
    ...data,
  };
};

export default AppComponent

context state.js

import { createContext, useContext } from 'react';

const AppContext = createContext();

export function AppWrapper({ children }) {
  let sharedState = {
    /* whatever you want */
  };

  return (
    <AppContext.Provider value={sharedState}>{children}</AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

Now I need to save the data the of the form on page 1 (name, surname) and pass it to the page 2 where (email and phone) and finally a summary where I want to have all the fields. How can I set the shared_state from the following page?

step1.js import React from "react";

function Step1(props) {
  return (
    <div>
      <p>Name: <input name="name" /></p>
      <p>Surname: <input name="surname" /></p>
    </div>
  );
}

export default Step1;

step2.js

import React from "react";

export default function Step2(props) {
  return (
    <div>
      <p>Email: <input name="email" /></p>
      <p>Phone: <input name="Phone" /></p>
    </div>
  );

How can I set a state from user data in step1 and pass the data to step2. Can anyone help me out with this?

Answer 1

Everything state related that works in React will work in Next.js, think of _app.js as a parent component, and each page its child.

React Context will also work but it is useful if you want to pass a state from parent to children through a large hierarchy of components. Here you only have your _app.js and 2 direct children which are your 2 form pages.

You can simply create a state in _app.js and pass that state as prop to your form pages like this:

import { useState } from "react"

const AppComponent = ({ Component, pageProps, currentUser }) => {
  const [formData, setFormData] = useState({});
  const updateFormData = (newData) => {
    setFormData({ ...formData, ...newData });
  };
  return <Component {...pageProps} updateFormData={updateFormData} />;
};

function Step1({ updateFormData }) {
  const handleNameChange = (event) => {
    updateFormData({ name: event.target.value });
  };
  const handleSurnameChange = (event) => {
    updateFormData({ surname: event.target.value });
  };
  return (
    <div>
      <p>
        Name: <input name="name" onChange={handleNameChange} />
      </p>
      <p>
        Surname: <input name="surname" onChange={handleSurnameChange} />
      </p>
    </div>
  );
}

By doing the same in your second form page, you will have all your form data in the formData variable, which you can pass to another page to display result, do an API call etc.

Answer 2

You have the option of saving the data in local storage and then load the data.

The best solution would be to use some kind of state management or context API. You would have to first create a Provider in the _app file and then consume them in each file separately.

Otherwise, you can create the form on one page and then instead of pushing the router on a new page when they move steps, you would replace it, giving the feeling a new page opens.