Understanding how to properly implement a multi-step form in React

user_16450257 0
Viewed 1028

I am using this guide to create a multi-step form in a React 17.0.1 application with Typescript version 4.1.2: https://dev.to/sametweb/how-to-create-multi-step-forms-in-react-3km4

I found this guide to be very helpful, and for the most part I completely understand what is happening. I skipped step 6 because I'm not sure I even really need it for what I'm trying to do.

I followed the steps up to 6 and made the same form the tutorial makes and it does work exactly as intended, however it does not appear in the proper place. Right now the form is appearing on my Home screen and I believe this has something to do with the way in which I have set up the "Steps" in App.tsx. This is my home page including the form:

home

This is my App.tsx:

/** @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';
import { Header } from './header';
import { HomePage } from './Views/Home/HomePage';
import { fontFamily, fontSize, gray2 } from './Styles';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import PlayerPage from './Views/PlayerPage';
import PlayersPage from './Views/PlayersPage';
import PlayerCreatePage from './Views/Create/PlayerCreatePage';
import NotFoundPage from './Views/NotFoundPage';
import StatsPage from './Views/Stats/Stats';
import { Steps, Step } from 'react-step-builder';
import SpecialAbilities from './Views/Skills/SpecialAbilities';
import AttrPage from './Views/Skills/AttrPage';
import CoolPage from './Views/Skills/CoolPage';

function App() {
  return (
    <BrowserRouter>
      <div
        css={css`
          font-family: ${fontFamily};
          font-size: ${fontSize};
          color: ${gray2};
        `}
      >
        <Header />
        <Routes>
          <Route path="" element={<HomePage />} />
          <Route path="Players" element={<PlayersPage />} />
          <Route path="Player/:id" element={<PlayerPage />} />
          <Route path="Create" element={<PlayerCreatePage />} />
          <Route path="Stats" element={<StatsPage />} />
          <Route path="SpecialAbilities" element={<SpecialAbilities />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
        <Steps>
          <Step component={SpecialAbilities} />
          <Step component={AttrPage} />
          <Step component={CoolPage} />
        </Steps>
      </div>
    </BrowserRouter>
  );
}

export default App;

I would like this multi-step form to appear on a page AFTER the Stats page. If I need to create a new page to put the multi-step form component I have a blank Skills page to do just that if need be. Right now if I just navigate to the SpecialAbilities page I get the error TypeError: props.getState is not a function.

Here are the 3 components included in the form if you need them:

Special Abilities

/** @jsxImportSource @emotion/react */
import React from 'react';

function SpecialAbilities(props: any) {
  return (
    <div>
      <p>
        Name:{' '}
        <input
          name="name"
          value={props.getState('name', '')}
          onChange={props.handleChange}
        />
      </p>
      <p>
        Surname:{' '}
        <input
          name="surname"
          value={props.getState('surname', '')}
          onChange={props.handleChange}
        />
      </p>
      <button onClick={props.next}>Next</button>
    </div>
  );
}

export default SpecialAbilities;

AttrPage

import React from 'react';

function AttrPage(props: any) {
  return (
    <div>
      <p>
        Email:{' '}
        <input
          name="email"
          value={props.getState('email', '')}
          onChange={props.handleChange}
        />
      </p>
      <p>
        Phone:{' '}
        <input
          name="Phone"
          value={props.getState('phone', '')}
          onChange={props.handleChange}
        />
      </p>
      <button onClick={props.prev}>Previous</button>
      <button onClick={props.next}>Next</button>
    </div>
  );
}

export default AttrPage;

Cool Page

import React from 'react';

function CoolPage(props: any) {
  return (
    <div>
      <p>Name: {props.state.name}</p>
      <p>Surname: {props.state.surname}</p>
      <p>Email: {props.state.email}</p>
      <p>Phone: {props.state.phone}</p>
      <button onClick={props.prev}>Previous</button>
    </div>
  );
}

export default CoolPage;
reactjs javascript
1 Answers

I figured it out. I could delete the question, but I think this might be helpful for anyone else trying to use that tutorial.

The <Steps> tags don't necessarily need to go in App.js. They need to go wherever you want the multi-step form. So in my case I made a Skills.js page and then set up the Steps there like this:

/** @jsxImportSource @emotion/react */
import React, { useState } from 'react';
import { css } from '@emotion/react';
import { Steps, Step } from 'react-step-builder';
import SpecialAbilities from '../Skills/SpecialAbilities';
import AttrPage from '../Skills/AttrPage';
import CoolPage from '../Skills/CoolPage';

function SkillsPage() {
  return (
    <div>
      <Steps>
        <Step component={SpecialAbilities} />
        <Step component={AttrPage} />
        <Step component={CoolPage} />
      </Steps>
    </div>
  );
}

export default SkillsPage;

And it works exactly as expected.

user_164502570
Related