Building a Seamless Multi-Step Form in React

Building a Multi-Step Form with React

Forms are a crucial part of most applications, and building a multi-step form can be a challenging task. In this article, we will explore how to build a multi-step form using React without relying on any third-party packages. We will use the useState hook to manage the form state and create a seamless user experience.

Initializing the Project

To get started, let’s create a new Next.js project using the following command:

bash
npx create-next-app my-multi-step-form


Alternatively, you can create a new React project using create-react-app. For styling, we will use Mantine CSS, which can be installed using npm or yarn.

Building the Form Components

Let’s create a new file called Form.js in the components directory. This component will handle the form logic and render the different steps.

“`jsx
import React, { useState } from ‘react’;

const Form = () => {
const [page, setPage] = useState(0);
const [formData, setFormData] = useState({});

const handleNextPage = () => {
setPage(page + 1);
};

const handlePrevPage = () => {
setPage(page – 1);
};

return (

);
};

export default Form;
“`

We will also create separate components for each step of the form. For example, Step1.js might look like this:

“`jsx
import React from ‘react’;

const Step1 = ({ handleNextPage }) => {
return (

);
};

export default Step1;
“`

Managing Form State

To manage the form state, we will use the useState hook. We will create a separate state variable for each input field and update the state using the setFormData function.

“`jsx
const [name, setName] = useState(”);
const [email, setEmail] = useState(”);
const [employmentStatus, setEmploymentStatus] = useState(”);

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData((prevFormData) => ({ …prevFormData, [name]: value }));
};
“`

Validating Form Data

To validate the form data, we will create a separate function that checks the input fields for errors.

jsx
const validateFormData = () => {
if (!name || !email || !employmentStatus) {
alert('Please fill out all fields');
return false;
}
return true;
};


Sending Form Data to Supabase

To send the form data to Supabase, we will create a separate API route using Next.js. We will use the fetch API to send a POST request to the Supabase instance.

jsx
const handleSubmit = async (e) => {
e.preventDefault();
if (validateFormData()) {
try {
const response = await fetch('/api/post-supabase', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData),
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
};


In this article, we have learned how to build a multi-step form using React without relying on any third-party packages. We have used the useState hook to manage the form state and created a seamless user experience. We have also validated the form data and sent it to a Supabase instance using a separate API route.