For all of you Bootstrap, developers who need to construct a multi-step form in React, here is this simple one.

It was built with Create React App and uses React Hooks and Bootstrap 4.

It displays a linear progress bar at the top. The user fills the details in stages, followed by GDPR information and a Thank You stage.

It is a single component where each stage is rendered according to the stage counter,

{
    stage === 4 && ...
}

App.js

import React, { useState } from 'react';
import './App.css'; 

const stages = ['name', 'contact', 'gdpr', 'thanks'];

function App() {
  const [stage, setStage] = useState(0);

  const [details, setDetails] = React.useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    acceptGDPR: false
  });

  const processField = (name, value) => {
    setDetails({ ...details, [name]: value });
  }

  return (
    <div className="container">
      <h1>Register</h1>
      <div className="progress mt-3 mb-3">
        <div className="progress-bar" role="progressbar" style={{ width: `${ (stage + 1) / stages.length * 100 }%` }} aria-valuenow={ (stage + 1) / stages.length * 100 } aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      {
        stage === 0 && 
        <form>
          <div className="form-group">
            <label htmlFor="firstName">First Name</label>
            <input…