Context Api With Stepper with Form Data
// App.js
import { Step, StepLabel, Stepper } from "@mui/material";
import BasicDetails from "./Page/Property Registration/Basicdetails";
import LocationDetails from "./Page/Property Registration/Locationdetails";
import PropertyDetails from "./Page/Property Registration/Propertydetails";
import { multiStepContext } from "./StepContext";
import { useContext } from "react";
import DisplayData from "./Page/Property Registration/Displaydata";
function App() {
const { currentStep, finalData } = useContext(multiStepContext);
function showStep(step) {
switch (step) {
case 1:
return <BasicDetails />
case 2:
return <LocationDetails />
case 3:
return <PropertyDetails />
}
}
return (
<div style={{ textAlign: "center" }}>
<h1>Hello Print</h1>
<Stepper style={{ width: '80%', paddingLeft: '10%' }} activeStep={currentStep - 1} orientation="horizontal" >
<Step>
<StepLabel>Basic Details</StepLabel>
</Step>
<Step>
<StepLabel>Location Details</StepLabel>
</Step>
<Step>
<StepLabel>Property Details</StepLabel>
</Step>
</Stepper>
{showStep(currentStep)}
{
finalData.length > 0 ? <DisplayData /> : ''
}
</div>
);
}
export default App;
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import StepContext from './StepContext';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<StepContext>
<React.StrictMode>
<App />
</React.StrictMode>
</StepContext>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
// StepContext.js
import React, { useState } from "react";
import App from './App';
export const multiStepContext = React.createContext();
const StepContext = () => {
const [currentStep, setStep] = useState(1);
const [userData, setUserData] = useState([]);
const [finalData, setFinalData] = useState([]);
function submitData() {
setFinalData(finalData => [...finalData, userData]);
setUserData('');
setStep(1);
console.log("User All Data :- ", userData);
}
return (
<div>
<multiStepContext.Provider value={{ currentStep, setStep, userData, setUserData, finalData, setFinalData, submitData }} >
<App />
</multiStepContext.Provider>
</div>
);
}
export default StepContext;
//Create Page using Stepper
Page :- 1 ( Basicdetails.jsx)
import { Box, Button, TextField } from "@mui/material";
import { multiStepContext } from "../../StepContext";
import { useContext } from "react";
export default function BasicDetails() {
const { setStep, userData, setUserData } = useContext(multiStepContext);
return (
<>
<h1>Basic Details</h1>
<Box>
<TextField label="First Name" variant="outlined" value={userData['firstname']} color="secondary"
onChange={(e) => setUserData({ ...userData, "firstname": e.target.value })} />
</Box>
<Box>
<TextField label="Last Name" variant="outlined" value={userData['lastname']} color="secondary"
onChange={(e) => setUserData({ ...userData, "lastname": e.target.value })} />
</Box>
<Box>
<TextField label="Contact Number" variant="outlined" value={userData['contactno']} color="secondary"
onChange={(e) => setUserData({ ...userData, "contactno": e.target.value })} />
</Box>
<Box>
<Button variant="contained" color="primary" onClick={() => setStep(2)}>Next</Button>
</Box>
</>
);
}
Page :- 2 ( Locationdetails.jsx)
import { Box, Button, TextField } from "@mui/material";
import { useContext } from "react";
import { multiStepContext } from "../../StepContext";
export default function LocationDetails() {
const { setStep, userData, setUserData } = useContext(multiStepContext);
return (
<>
<h1>Location Details</h1>
<Box>
<TextField label="Location" variant="outlined" value={userData['location']} color="secondary"
onChange={(e) => setUserData({ ...userData, "location": e.target.value })} />
</Box>
<Box>
<TextField label="City" variant="outlined" value={userData['city']} color="secondary"
onChange={(e) => setUserData({ ...userData, "city": e.target.value })} />
</Box>
<Box>
<TextField label="State" variant="outlined" value={userData['state']} color="secondary"
onChange={(e) => setUserData({ ...userData, "state": e.target.value })} />
</Box>
<Box>
<Button variant="contained" color="secondary" onClick={() => setStep(1)}>Back</Button>
<span> </span>
<Button variant="contained" color="primary" onClick={() => setStep(3)}>Next</Button>
</Box>
</>
);
}
Page :- 3 ( Propertydetails.jsx)
import { Box, Button, TextField } from "@mui/material";
import { useContext } from "react";
import { multiStepContext } from "../../StepContext";
export default function PropertyDetails() {
const { setStep, userData, setUserData, submitData } = useContext(multiStepContext);
return (
<>
<h1>Property Details</h1>
<Box>
<TextField label="Property Name" variant="outlined" value={userData['propertyname']} color="secondary"
onChange={(e) => setUserData({ ...userData, "propertyname": e.target.value })} />
</Box>
<Box>
<TextField label="Property type" variant="outlined" value={userData['propertytype']} color="secondary"
onChange={(e) => setUserData({ ...userData, "propertytype": e.target.value })} />
</Box>
<Box>
<TextField label="Price" variant="outlined" value={userData['price']} color="secondary"
onChange={(e) => setUserData({ ...userData, "price": e.target.value })} />
</Box>
<Box>
<Button variant="contained" color="secondary" onClick={() => setStep(2)}>Back</Button>
<span> </span>
<Button variant="contained" color="primary" onClick={submitData}>Submit</Button>
</Box>
</>
);
}
//Display page
Displaydata.jsx
import { useContext } from "react";
import { multiStepContext } from "../../StepContext";
import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead } from "@mui/material";
export default function DisplayData() {
const { finalData } = useContext(multiStepContext);
return (
<>
<h1>Display All Data from ContextApi</h1>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>First Name</TableCell>
<TableCell>Last Name</TableCell>
<TableCell>Contact</TableCell>
<TableCell>Location</TableCell>
<TableCell>City</TableCell>
<TableCell>State</TableCell>
<TableCell>Property Name</TableCell>
<TableCell>Property Type</TableCell>
<TableCell>Price</TableCell>
</TableRow>
</TableHead>
<TableBody>
{
finalData.map((data) => (
<TableRow key={data.firstname}>
<TableCell>{data.firstname}</TableCell>
<TableCell>{data.lastname}</TableCell>
<TableCell>{data.contact}</TableCell>
<TableCell>{data.location}</TableCell>
<TableCell>{data.city}</TableCell>
<TableCell>{data.state}</TableCell>
<TableCell>{data.propertyname}</TableCell>
<TableCell>{data.propertytype}</TableCell>
<TableCell>{data.price}</TableCell>
</TableRow>
))
}
</TableBody>
</Table>
</TableContainer>
</>
);
}
