Context Api With Stepper with Form Data

 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>

        </>

    );

}