How to create a Multiform in MUI and Next Js?
mui|

Ayush

Arya

|

Feb 02, 2024

How to create a Multiform in Material UI and Next Js?


Embarking on the journey of creating a Multiform with Material-UI and Next.js opens the door to a world of possibilities for dynamic and engaging user experiences. In this comprehensive guide, we'll explore the intricacies of building a Multiform and dive into the provided code snippets step by step.

Unveiling the Multiform Architecture

Multiform Component - MultiForms.js

Now, let's delve into the MultiForms component, where Material-UI's Stepper guides users through different steps. The showSteps function dynamically renders the appropriate form step based on the current step.

1// MultiForms.js 2import React, { useContext } from "react"; 3import StepOne from "./StepOne"; 4import StepTwo from "./StepTwo"; 5import { Stepper, StepLabel, Step } from "@mui/material"; 6import { MultiStepContext } from "./StepContext"; 7 8const MultiForms = () => { 9 const { currentstep } = useContext(MultiStepContext); 10 11 function showSteps(step) { 12 switch (step) { 13 case 1: 14 return <StepOne />; 15 case 2: 16 return <StepTwo />; 17 default: 18 // Handle additional steps as needed 19 } 20 } 21 22 return ( 23 <> 24 <div className="App"> 25 <center> 26 <h1> MultiForms</h1> 27 <Stepper 28 style={{ width: "400px" }} 29 activeStep={currentstep - 1} 30 orientation="horizontal" 31 > 32 <Step> 33 <StepLabel></StepLabel> 34 </Step> 35 <Step> 36 <StepLabel></StepLabel> 37 </Step> 38 </Stepper> 39 {showSteps(currentstep)} 40 </center> 41 </div> 42 </> 43 ); 44}; 45 46export default MultiForms;

Step Context - StepContext.js

The StepContext component plays a pivotal role in managing the state of the Multiform. It handles form data, form errors, the current step, and provides functions like SubmitData to process the collected information.

1// StepContext.js 2import React, { useState } from "react"; 3import MultiForms from "./MultiForms"; 4 5export const MultiStepContext = React.createContext(); 6const StepContext = () => { 7 const [currentstep, setCurrentStep] = useState(1); 8 const [UserData, setUserData] = useState({ 9 firstname: "", 10 lastname: "", 11 email: "", 12 number: "", 13 address: "", 14 city: "", 15 }); 16 const [File, setFile] = useState(""); 17 const [formErrors, setFormError] = useState({}); 18 19 function SubmitData() { 20 console.log("click"); 21 let Data = { UserData, File }; 22 console.log(Data); 23 // Further processing logic can be added here 24 } 25 26 return ( 27 <> 28 <div> 29 <MultiStepContext.Provider 30 value={{ 31 formErrors, 32 setFormError, 33 File, 34 setFile, 35 currentstep, 36 setCurrentStep, 37 UserData, 38 setUserData, 39 SubmitData, 40 }} 41 > 42 <MultiForms /> 43 </MultiStepContext.Provider> 44 </div> 45 </> 46 ); 47}; 48 49export default StepContext;

app.js - The Gateway to Multiforms

Let's start by understanding the root _app.js file. This file initializes the application and wraps it with a StepContext component, a crucial part of our Multiform architecture. The StepContext will manage the flow between different form steps.

1// _app.js 2import StepContext from "@/components/MultiForm/StepContext"; 3import "@/styles/globals.css"; 4 5export default function App({ Component, pageProps }) { 6 return ( 7 <> 8 <StepContext> 9 <Component {...pageProps} />; 10 </StepContext> 11 </> 12 ); 13}

StepOne - Collecting Basic Information

StepOne.js handles the collection of basic user information, ensuring that all required fields are filled. Validation logic is implemented to display errors if necessary.

1// StepOne.js 2import React, { useContext } from "react"; 3import { Button, TextField } from "@mui/material"; 4import { MultiStepContext } from "./StepContext"; 5 6const StepOne = () => { 7 const { setCurrentStep, UserData, setUserData, formErrors, setFormError } = 8 useContext(MultiStepContext); 9 10 const handleInput = (e) => { 11 setUserData({ ...UserData, [e.target.name]: e.target.value }); 12 }; 13 14 const validate = () => { 15 let inputValid = UserData; 16 let formErrors = {}; 17 let isValid = true; 18 const reg = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i; 19 20 if (!inputValid.firstname) { 21 isValid = false; 22 formErrors.firstname = "Firstname field is required!"; 23 } 24 if (!inputValid.lastname) { 25 isValid = false; 26 formErrors.lastname = "Lastname field is required!"; 27 } 28 if (!inputValid.email) { 29 isValid = false; 30 formErrors.email = "Email field is required "; 31 } else if (!reg.test(inputValid.email)) { 32 isValid = false; 33 formErrors.email = "This is not a valid email"; 34 } 35 setFormError(formErrors); 36 return isValid; 37 }; 38 39 const stepButtonTwo = (e) => { 40 e.preventDefault(); 41 if (validate()) { 42 setCurrentStep(2); 43 } 44 }; 45 return ( 46 <> 47 <div className="container"> 48 <div> 49 <TextField 50 className="wd" 51 type="text" 52 value={UserData.firstname} 53 name="firstname" 54 onChange={handleInput} 55 label="FirstName" 56 margin="normal" 57 variant="outlined" 58 color="primary" 59 /> 60 </div> 61 <span style={{ color: "red" }}>{formErrors.firstname}</span> 62 <div> 63 <TextField 64 className="wd" 65 type="text" 66 value={UserData.lastname} 67 name="lastname" 68 onChange={handleInput} 69 label="LastName" 70 margin="normal" 71 variant="outlined" 72 color="primary" 73 /> 74 </div> 75 <span style={{ color: "red" }}>{formErrors.lastname}</span> 76 <div> 77 <TextField 78 className="wd" 79 type="email" 80 value={UserData.email} 81 name="email" 82 onChange={handleInput} 83 label="Email" 84 margin="normal" 85 variant="outlined" 86 color="primary" 87 /> 88 </div> 89 <span style={{ color: "red" }}>{formErrors.email}</span> 90 <div> 91 <Button 92 style={{ margin: "10px" }} 93 variant="contained" 94 onClick={stepButtonTwo} 95 color="primary" 96 > 97 Next 98 </Button> 99 </div> 100 </div> 101 </> 102 ); 103}; 104 105export default StepOne;

StepTwo - Advanced Information and File Upload

StepTwo.js focuses on collecting advanced user information and allows users to upload a file. Similar to StepOne, it includes validation logic for error handling.

1// StepTwo.js 2import React, { useContext } from "react"; 3import { 4 Button, 5 TextField, 6 Select, 7 FormControl, 8 MenuItem, 9 InputLabel, 10} from "@mui/material"; 11import { MultiStepContext } from "./StepContext"; 12import FileUploadIcon from "@mui/icons-material/FileUpload"; 13 14const StepTwo = () => { 15 const { 16 setCurrentStep, 17 UserData, 18 setUserData, 19 SubmitData, 20 File, 21 setFile, 22 formErrors, 23 setFormError, 24 } = useContext(MultiStepContext); 25 26 const validate = () => { 27 let inputValid = UserData; 28 let formErrors = {}; 29 let isValid = true; 30 31 if (!inputValid.address) { 32 isValid = false; 33 formErrors.address = "Address field is required!"; 34 } 35 if (!inputValid.city) { 36 isValid = false; 37 formErrors.city = "City field is required!"; 38 } 39 if (!inputValid.number) { 40 isValid = false; 41 formErrors.number = "Number field is required!"; 42 } else if (inputValid.number.length !== 10) { 43 isValid = false; 44 formErrors.number = "Number must be 10 characters"; 45 } 46 if (!File) { 47 isValid = false; 48 formErrors.File = "File field is required!"; 49 } 50 setFormError(formErrors); 51 return isValid; 52 }; 53 54 const stepButtonFinal = (e) => { 55 e.preventDefault(); 56 if (validate()) { 57 SubmitData(); 58 } 59 }; 60 61 const handleInput = (e) => { 62 setUserData({ ...UserData, [e.target.name]: e.target.value }); 63 }; 64 65 const handleFile = (e) => { 66 const file = e.target.files[0]; 67 setFile(file); 68 console.log(file); 69 }; 70 return ( 71 <div className="container"> 72 <div> 73 <TextField 74 className="wd" 75 type="number" 76 value={UserData.number} 77 onChange={handleInput} 78 name="number" 79 label="Number" 80 margin="normal" 81 variant="outlined" 82 color="primary" 83 /> 84 </div> 85 <span style={{ color: "red" }}>{formErrors.number}</span> 86 87 <div> 88 <TextField 89 className="wd" 90 type="text" 91 value={UserData.address} 92 name="address" 93 onChange={handleInput} 94 label="Address" 95 margin="normal" 96 variant="outlined" 97 color="primary" 98 /> 99 </div> 100 <span style={{ color: "red" }}>{formErrors.address}</span> 101 102 <div> 103 <FormControl sx={{ my: 2, minWidth: 220 }}> 104 <InputLabel id="demo-simple-select-label">Enter City</InputLabel> 105 <Select 106 labelId="demo-simple-select-label" 107 id="demo-simple-select" 108 value={UserData.city} 109 name="city" 110 label="Enter City" 111 onChange={handleInput} 112 > 113 <MenuItem value="london">London</MenuItem> 114 <MenuItem value="newyork">New york</MenuItem> 115 <MenuItem value="dubai">Dubai</MenuItem> 116 </Select> 117 </FormControl> 118 </div> 119 <span style={{ color: "red" }}>{formErrors.city}</span> 120 121 <div className="f-file"> 122 <input 123 onChange={handleFile} 124 name="file" 125 type="file" 126 accept="" 127 style={{ display: "none" }} 128 id="contained-button-file" 129 multiple 130 /> 131 <label htmlFor="contained-button-file"> 132 <Button variant="contained" color="primary" component="span"> 133 <FileUploadIcon /> 134 Upload 135 </Button> 136 </label> 137 <div>{File.name}</div> 138 </div> 139 <span style={{ color: "red" }}>{formErrors.File}</span> 140 141 <div> 142 <Button 143 variant="contained" 144 onClick={() => setCurrentStep(1)} 145 color="secondary" 146 > 147 Back 148 </Button> 149 <span> </span> 150 <Button 151 style={{ margin: "10px" }} 152 variant="contained" 153 onClick={stepButtonFinal} 154 color="primary" 155 > 156 Submit 157 </Button> 158 </div> 159 </div> 160 ); 161}; 162 163export default StepTwo;

Conclusion: Crafting a Seamless Multiform Experience

In conclusion, mastering the art of Multiforms with Material-UI and Next.js empowers you to create interactive, step-by-step user journeys. By understanding the provided code snippets, you have the foundation to customize and expand this Multiform for your specific project needs.

Enhance your development skills with more insights and tutorials at Your Learning Hub.


Popular Blog Categories


Contact Me

Phone

Discuss A Project Or Just Want To Say Hi?
My Inbox Is Open For All.

Mail : techayu001@gmail.com

Chatbot