├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── hooks
    │   └── useFormContext.js
    ├── App.js
    ├── index.js
    ├── components
    │   ├── FormInputs.js
    │   ├── OptIn.js
    │   ├── Form.js
    │   ├── Billing.js
    │   └── Shipping.js
    ├── index.css
    └── context
    │   └── FormContext.js
├── .gitignore
├── package.json
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitdagray/react-multi-step-form/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitdagray/react-multi-step-form/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitdagray/react-multi-step-form/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/hooks/useFormContext.js:
--------------------------------------------------------------------------------
1 | import { useContext } from "react"
2 | import FormContext from "../context/FormContext"
3 | 
4 | const useFormContext = () => {
5 |     return useContext(FormContext)
6 | }
7 | 
8 | export default useFormContext


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import Form from "./components/Form"
 2 | import { FormProvider } from './context/FormContext'
 3 | 
 4 | function App() {
 5 | 
 6 |   return (
 7 |     <FormProvider>
 8 |       <Form />
 9 |     </FormProvider>
10 |   )
11 | 
12 | }
13 | 
14 | export default App;
15 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/components/FormInputs.js:
--------------------------------------------------------------------------------
 1 | import Billing from "./Billing"
 2 | import OptIn from "./OptIn"
 3 | import Shipping from "./Shipping"
 4 | import useFormContext from "../hooks/useFormContext"
 5 | 
 6 | const FormInputs = () => {
 7 | 
 8 |     const { page } = useFormContext()
 9 | 
10 |     const display = {
11 |         0: <Billing />,
12 |         1: <Shipping />,
13 |         2: <OptIn />
14 |     }
15 | 
16 |     const content = (
17 |         <div className="form-inputs flex-col">
18 |             {display[page]}
19 |         </div>
20 |     )
21 | 
22 | 
23 |     return content
24 | }
25 | export default FormInputs


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/OptIn.js:
--------------------------------------------------------------------------------
 1 | import useFormContext from "../hooks/useFormContext"
 2 | 
 3 | const OptIn = () => {
 4 |     const { data, handleChange } = useFormContext()
 5 | 
 6 |     const content = (
 7 |         <>
 8 |             <label htmlFor="optInNews">
 9 |                 <input type="checkbox" id="optInNews" name="optInNews" checked={data.optInNews} onChange={handleChange} />
10 |                 Receive our newsletter
11 |             </label>
12 |             <ul className="flex-col">
13 |                 <li>Save 10% Now</li>
14 |                 <li>Receive Discount Coupons</li>
15 |                 <li>Find Out About New Products</li>
16 |             </ul>
17 |         </>
18 |     )
19 | 
20 |     return content
21 | }
22 | export default OptIn


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-multi-page-form",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "react": "^18.2.0",
10 |     "react-dom": "^18.2.0",
11 |     "react-scripts": "5.0.1",
12 |     "web-vitals": "^2.1.4"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }


--------------------------------------------------------------------------------
/src/components/Form.js:
--------------------------------------------------------------------------------
 1 | import FormInputs from './FormInputs'
 2 | import useFormContext from "../hooks/useFormContext"
 3 | 
 4 | const Form = () => {
 5 | 
 6 |     const {
 7 |         page,
 8 |         setPage,
 9 |         data,
10 |         title,
11 |         canSubmit,
12 |         disablePrev,
13 |         disableNext,
14 |         prevHide,
15 |         nextHide,
16 |         submitHide
17 |     } = useFormContext()
18 | 
19 |     const handlePrev = () => setPage(prev => prev - 1)
20 | 
21 |     const handleNext = () => setPage(prev => prev + 1)
22 | 
23 |     const handleSubmit = e => {
24 |         e.preventDefault()
25 |         console.log(JSON.stringify(data))
26 |     }
27 | 
28 | 
29 |     const content = (
30 |         <form className="form flex-col" onSubmit={handleSubmit}>
31 | 
32 |             <header className="form-header">
33 |                 <h2>{title[page]}</h2>
34 | 
35 |                 <div className="button-container">
36 | 
37 |                     <button type="button" className={`button ${prevHide}`} onClick={handlePrev} disabled={disablePrev}>Prev</button>
38 | 
39 |                     <button type="button" className={`button ${nextHide}`} onClick={handleNext} disabled={disableNext}>Next</button>
40 | 
41 |                     <button type="submit" className={`button ${submitHide}`} disabled={!canSubmit}>Submit</button>
42 |                 </div>
43 |             </header>
44 | 
45 | 
46 |             <FormInputs />
47 | 
48 |         </form>
49 |     )
50 | 
51 |     return content
52 | }
53 | export default Form


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # "React Mutli-Step Form Tutorial"
 2 | 
 3 | ---
 4 | 
 5 | ### Author Links
 6 | 
 7 | 👋 Hello, I'm Dave Gray.
 8 | 
 9 | ✅ [Check out my YouTube Channel with all of my tutorials](https://www.youtube.com/DaveGrayTeachesCode).
10 | 
11 | 🚩 [Subscribe to my channel](https://bit.ly/3nGHmNn)
12 | 
13 | ☕ [Buy Me A Coffee](https://buymeacoffee.com/DaveGray)
14 | 
15 | 🚀 Follow Me:
16 | 
17 | - [Twitter](https://twitter.com/yesdavidgray)
18 | - [LinkedIn](https://www.linkedin.com/in/davidagray/)
19 | - [Blog](https://yesdavidgray.com)
20 | - [Reddit](https://www.reddit.com/user/DaveOnEleven)
21 | 
22 | ---
23 | 
24 | ### Description
25 | 
26 | 📺 [YouTube Video](https://youtu.be/QSBc8bABwE0) for this repository.
27 | 
28 | ---
29 | 
30 | ### 💻 Source Code
31 | 
32 | - 🔗 [React Multi-Step Form Tutorial - Completed Source Code](https://github.com/gitdagray/react-multi-step-form)
33 | 
34 | ---
35 | 
36 | ### 🎓 Academic Honesty
37 | 
38 | **DO NOT COPY FOR AN ASSIGNMENT** - Avoid plagiargism and adhere to the spirit of this [Academic Honesty Policy](https://www.freecodecamp.org/news/academic-honesty-policy/).
39 | 
40 | ---
41 | 
42 | ### ⚙ VS Code Extensions I Use:
43 | 
44 | - 🔗 [ES7 React JS Snippets Extension](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
45 | - 🔗 [vscode-icons VS Code Extension](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
46 | - 🔗 [Github Themes VS Code Extension](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | /* || UTILITY CLASSES */
 10 | 
 11 | .remove-button {
 12 |   display: none;
 13 | }
 14 | 
 15 | .offscreen {
 16 |   position: absolute;
 17 |   left: -10000px;
 18 | }
 19 | 
 20 | .split-container {
 21 |   display: flex;
 22 |   flex-flow: row nowrap;
 23 |   justify-content: space-evenly;
 24 |   gap: 1rem;
 25 | }
 26 | 
 27 | .flex-col {
 28 |   display: flex;
 29 |   flex-flow: column nowrap;
 30 |   gap: 0.35rem;
 31 |   width: 100%;
 32 | }
 33 | 
 34 | input:invalid {
 35 |   outline: 2px solid red;
 36 |   background-color: rgb(255, 255, 139);
 37 | }
 38 | 
 39 | 
 40 | /* || GENERAL STYLES */
 41 | 
 42 | body {
 43 |   font-family: 'Nunito', sans-serif;
 44 |   min-height: 100vh;
 45 |   background: radial-gradient(skyblue, darkblue);
 46 |   padding: 1rem;
 47 | }
 48 | 
 49 | input,
 50 | button,
 51 | textarea,
 52 | select {
 53 |   font: inherit;
 54 | }
 55 | 
 56 | #root {
 57 |   display: flex;
 58 |   flex-flow: column nowrap;
 59 |   gap: 0.5rem;
 60 | }
 61 | 
 62 | .progress-container {
 63 |   width: 100%;
 64 |   max-width: 600px;
 65 |   margin: auto;
 66 |   padding: 1rem;
 67 |   border: 1px solid #000;
 68 |   border-radius: 10px;
 69 |   background-color: whitesmoke;
 70 | }
 71 | 
 72 | .barmarker-container {
 73 |   display: flex;
 74 |   flex-flow: row nowrap;
 75 |   justify-content: space-around;
 76 | }
 77 | 
 78 | .barmarker {
 79 |   width: 100%;
 80 |   display: grid;
 81 |   place-content: center;
 82 | }
 83 | 
 84 | .barmarker:is(:not(:last-child)) {
 85 |   border-right: 1px solid #000;
 86 | }
 87 | 
 88 | .progress {
 89 |   width: 100%;
 90 |   height: 24px;
 91 | }
 92 | 
 93 | .form {
 94 |   width: 100%;
 95 |   max-width: 600px;
 96 |   margin: auto;
 97 |   padding: 0.75rem;
 98 |   border: 1px solid #000;
 99 |   border-radius: 10px;
100 |   background-color: whitesmoke;
101 | }
102 | 
103 | .form-header {
104 |   display: flex;
105 |   flex-flow: row nowrap;
106 |   justify-content: space-between;
107 |   align-items: center;
108 | }
109 | 
110 | .button-container {
111 |   display: flex;
112 |   flex-flow: row nowrap;
113 |   gap: 0.5rem;
114 | }
115 | 
116 | .button {
117 |   padding: 0.5rem;
118 |   border-radius: 10px;
119 | }
120 | 
121 | .button:focus {
122 |   outline: 2px solid gold;
123 | }
124 | 
125 | input,
126 | select {
127 |   padding: 0.5rem;
128 |   border-radius: 10px;
129 |   width: 100%;
130 | }
131 | 
132 | input[type="checkbox"] {
133 |   width: 16px;
134 |   height: 16px;
135 |   margin-right: 0.5rem;
136 | }
137 | 
138 | ul {
139 |   list-style-type: none;
140 |   margin-bottom: 1rem;
141 | }


--------------------------------------------------------------------------------
/src/context/FormContext.js:
--------------------------------------------------------------------------------
  1 | import { createContext, useState, useEffect } from "react"
  2 | 
  3 | const FormContext = createContext({})
  4 | 
  5 | export const FormProvider = ({ children }) => {
  6 | 
  7 |     const title = {
  8 |         0: 'Billing Info',
  9 |         1: 'Shipping Info',
 10 |         2: 'Opt-In'
 11 |     }
 12 | 
 13 |     const [page, setPage] = useState(0)
 14 | 
 15 |     const [data, setData] = useState({
 16 |         billFirstName: "",
 17 |         billLastName: "",
 18 |         billAddress1: "",
 19 |         billAddress2: "",
 20 |         billCity: "",
 21 |         billState: "",
 22 |         billZipCode: "",
 23 |         sameAsBilling: false,
 24 |         shipFirstName: "",
 25 |         shipLastName: "",
 26 |         shipAddress1: "",
 27 |         shipAddress2: "",
 28 |         shipCity: "",
 29 |         shipState: "",
 30 |         shipZipCode: "",
 31 |         optInNews: false
 32 |     })
 33 | 
 34 | 
 35 |     useEffect(() => {
 36 |         if (data.sameAsBilling) {
 37 |             setData(prevData => ({
 38 |                 ...prevData,
 39 |                 shipFirstName: prevData.billFirstName,
 40 |                 shipLastName: prevData.billLastName,
 41 |                 shipAddress1: prevData.billAddress1,
 42 |                 shipAddress2: prevData.billAddress2,
 43 |                 shipCity: prevData.billCity,
 44 |                 shipState: prevData.billState,
 45 |                 shipZipCode: prevData.billZipCode
 46 |             }))
 47 |         } else {
 48 |             setData(prevData => ({
 49 |                 ...prevData,
 50 |                 shipFirstName: "",
 51 |                 shipLastName: "",
 52 |                 shipAddress1: "",
 53 |                 shipAddress2: "",
 54 |                 shipCity: "",
 55 |                 shipState: "",
 56 |                 shipZipCode: ""
 57 |             }))
 58 |         }
 59 |     }, [data.sameAsBilling])
 60 | 
 61 | 
 62 |     const handleChange = e => {
 63 |         const type = e.target.type
 64 | 
 65 |         const name = e.target.name
 66 | 
 67 |         const value = type === "checkbox"
 68 |             ? e.target.checked
 69 |             : e.target.value
 70 | 
 71 |         setData(prevData => ({
 72 |             ...prevData,
 73 |             [name]: value
 74 |         }))
 75 |     }
 76 | 
 77 |     const {
 78 |         billAddress2,
 79 |         sameAsBilling,
 80 |         shipAddress2,
 81 |         optInNews,
 82 |         ...requiredInputs } = data
 83 | 
 84 |     const canSubmit = [...Object.values(requiredInputs)].every(Boolean) && page === Object.keys(title).length - 1
 85 | 
 86 |     const canNextPage1 = Object.keys(data)
 87 |         .filter(key => key.startsWith('bill') && key !== 'billAddress2')
 88 |         .map(key => data[key])
 89 |         .every(Boolean)
 90 | 
 91 |     const canNextPage2 = Object.keys(data)
 92 |         .filter(key => key.startsWith('ship') && key !== 'shipAddress2')
 93 |         .map(key => data[key])
 94 |         .every(Boolean)
 95 | 
 96 |     const disablePrev = page === 0
 97 | 
 98 |     const disableNext =
 99 |         (page === Object.keys(title).length - 1)
100 |         || (page === 0 && !canNextPage1)
101 |         || (page === 1 && !canNextPage2)
102 | 
103 |     const prevHide = page === 0 && "remove-button"
104 | 
105 |     const nextHide = page === Object.keys(title).length - 1 && "remove-button"
106 | 
107 |     const submitHide = page !== Object.keys(title).length - 1 && "remove-button"
108 | 
109 |     return (
110 |         <FormContext.Provider value={{ title, page, setPage, data, setData, canSubmit, handleChange, disablePrev, disableNext, prevHide, nextHide, submitHide }}>
111 |             {children}
112 |         </FormContext.Provider>
113 |     )
114 | }
115 | 
116 | export default FormContext 


--------------------------------------------------------------------------------
/src/components/Billing.js:
--------------------------------------------------------------------------------
  1 | import useFormContext from "../hooks/useFormContext"
  2 | 
  3 | const Billing = () => {
  4 | 
  5 |     const { data, handleChange } = useFormContext()
  6 | 
  7 |     const content = (
  8 |         <div className="flex-col">
  9 |             <div className="split-container">
 10 |                 <div className="flex-col">
 11 |                     <label htmlFor="billFirstName">First Name</label>
 12 |                     <input
 13 |                         type="text"
 14 |                         id="billFirstName"
 15 |                         name="billFirstName"
 16 |                         placeholder="Jane"
 17 |                         pattern="([A-Z])[\w+.]{1,}"
 18 |                         value={data.billFirstName}
 19 |                         onChange={handleChange}
 20 |                     />
 21 |                 </div>
 22 |                 <div className="flex-col">
 23 |                     <label htmlFor="billLastName">Last Name</label>
 24 |                     <input
 25 |                         type="text"
 26 |                         id="billLastName"
 27 |                         name="billLastName"
 28 |                         placeholder="Doe"
 29 |                         pattern="([A-Z])[\w+.]{1,}"
 30 |                         value={data.billLastName}
 31 |                         onChange={handleChange}
 32 |                     />
 33 |                 </div>
 34 |             </div>
 35 | 
 36 |             <label htmlFor="billAddress1">Address</label>
 37 |             <input
 38 |                 type="text"
 39 |                 id="billAddress1"
 40 |                 name="billAddress1"
 41 |                 placeholder="555 Wallaby Way"
 42 |                 pattern="[\w\d\s.#]{2,}"
 43 |                 value={data.billAddress1}
 44 |                 onChange={handleChange}
 45 |             />
 46 | 
 47 |             <label htmlFor="billAddress2" className="offscreen">2nd Address line</label>
 48 |             <input
 49 |                 type="text"
 50 |                 id="billAddress2"
 51 |                 name="billAddress2"
 52 |                 placeholder="Apt. 2"
 53 |                 pattern="[\w\d\s.#]{2,}"
 54 |                 value={data.billAddress2}
 55 |                 onChange={handleChange}
 56 |             />
 57 | 
 58 |             <label htmlFor="billCity">City</label>
 59 |             <input
 60 |                 type="text"
 61 |                 id="billCity"
 62 |                 name="billCity"
 63 |                 placeholder="New York"
 64 |                 pattern="([A-Z])[\w\s.]{1,}"
 65 |                 value={data.billCity}
 66 |                 onChange={handleChange}
 67 |             />
 68 | 
 69 |             <label htmlFor="billState">State</label>
 70 |             <select
 71 |                 id="billState"
 72 |                 name="billState"
 73 |                 value={data.billState}
 74 |                 onChange={handleChange}
 75 |             >
 76 |                 <option value="AL">Alabama</option>
 77 |                 <option value="AK">Alaska</option>
 78 |                 <option value="AZ">Arizona</option>
 79 |                 <option value="AR">Arkansas</option>
 80 |                 <option value="CA">California</option>
 81 |                 <option value="CO">Colorado</option>
 82 |                 <option value="CT">Connecticut</option>
 83 |                 <option value="DE">Delaware</option>
 84 |                 <option value="DC">District Of Columbia</option>
 85 |                 <option value="FL">Florida</option>
 86 |                 <option value="GA">Georgia</option>
 87 |                 <option value="HI">Hawaii</option>
 88 |                 <option value="ID">Idaho</option>
 89 |                 <option value="IL">Illinois</option>
 90 |                 <option value="IN">Indiana</option>
 91 |                 <option value="IA">Iowa</option>
 92 |                 <option value="KS">Kansas</option>
 93 |                 <option value="KY">Kentucky</option>
 94 |                 <option value="LA">Louisiana</option>
 95 |                 <option value="ME">Maine</option>
 96 |                 <option value="MD">Maryland</option>
 97 |                 <option value="MA">Massachusetts</option>
 98 |                 <option value="MI">Michigan</option>
 99 |                 <option value="MN">Minnesota</option>
100 |                 <option value="MS">Mississippi</option>
101 |                 <option value="MO">Missouri</option>
102 |                 <option value="MT">Montana</option>
103 |                 <option value="NE">Nebraska</option>
104 |                 <option value="NV">Nevada</option>
105 |                 <option value="NH">New Hampshire</option>
106 |                 <option value="NJ">New Jersey</option>
107 |                 <option value="NM">New Mexico</option>
108 |                 <option value="NY">New York</option>
109 |                 <option value="NC">North Carolina</option>
110 |                 <option value="ND">North Dakota</option>
111 |                 <option value="OH">Ohio</option>
112 |                 <option value="OK">Oklahoma</option>
113 |                 <option value="OR">Oregon</option>
114 |                 <option value="PA">Pennsylvania</option>
115 |                 <option value="RI">Rhode Island</option>
116 |                 <option value="SC">South Carolina</option>
117 |                 <option value="SD">South Dakota</option>
118 |                 <option value="TN">Tennessee</option>
119 |                 <option value="TX">Texas</option>
120 |                 <option value="UT">Utah</option>
121 |                 <option value="VT">Vermont</option>
122 |                 <option value="VA">Virginia</option>
123 |                 <option value="WA">Washington</option>
124 |                 <option value="WV">West Virginia</option>
125 |                 <option value="WI">Wisconsin</option>
126 |                 <option value="WY">Wyoming</option>
127 |             </select>
128 | 
129 |             <label htmlFor="billZipCode">Zip Code</label>
130 |             <input
131 |                 type="text"
132 |                 id="billZipCode"
133 |                 name="billZipCode"
134 |                 placeholder="12345"
135 |                 pattern="[0-9]{5}"
136 |                 maxLength="5"
137 |                 value={data.billZipCode}
138 |                 onChange={handleChange}
139 |             />
140 |         </div>
141 |     )
142 | 
143 |     return content
144 | }
145 | export default Billing


--------------------------------------------------------------------------------
/src/components/Shipping.js:
--------------------------------------------------------------------------------
  1 | import useFormContext from "../hooks/useFormContext"
  2 | 
  3 | const Shipping = () => {
  4 | 
  5 |     const { data, handleChange } = useFormContext()
  6 | 
  7 |     const content = (
  8 |         <>
  9 |             <label htmlFor="sameAsBilling">
 10 |                 <input
 11 |                     type="checkbox"
 12 |                     id="sameAsBilling"
 13 |                     name="sameAsBilling"
 14 |                     checked={data.sameAsBilling}
 15 |                     onChange={handleChange}
 16 |                 />
 17 |                 Same as Billing Address
 18 |             </label>
 19 | 
 20 |             <div className="split-container">
 21 |                 <div className="flex-col">
 22 |                     <label htmlFor="shipFirstName">First Name</label>
 23 |                     <input
 24 |                         type="text"
 25 |                         id="shipFirstName"
 26 |                         name="shipFirstName"
 27 |                         placeholder="Jane"
 28 |                         pattern="([A-Z])[\w+.]{1,}"
 29 |                         value={data.shipFirstName}
 30 |                         onChange={handleChange}
 31 |                         disabled={data.sameAsBilling}
 32 |                     />
 33 |                 </div>
 34 |                 <div className="flex-col">
 35 |                     <label htmlFor="shipLastName">Last Name</label>
 36 |                     <input
 37 |                         type="text"
 38 |                         id="shipLastName"
 39 |                         name="shipLastName"
 40 |                         placeholder="Doe"
 41 |                         pattern="([A-Z])[\w+.]{1,}"
 42 |                         value={data.shipLastName}
 43 |                         onChange={handleChange}
 44 |                         disabled={data.sameAsBilling}
 45 |                     />
 46 |                 </div>
 47 |             </div>
 48 | 
 49 |             <label htmlFor="shipAddress1">Address</label>
 50 |             <input
 51 |                 type="text"
 52 |                 id="shipAddress1"
 53 |                 name="shipAddress1"
 54 |                 placeholder="555 Wallaby Way"
 55 |                 pattern="[\w\d\s.#]{2,}"
 56 |                 value={data.shipAddress1}
 57 |                 onChange={handleChange}
 58 |                 disabled={data.sameAsBilling}
 59 |             />
 60 | 
 61 |             <label htmlFor="shipAddress2"></label>
 62 |             <input
 63 |                 type="text"
 64 |                 id="shipAddress2"
 65 |                 name="shipAddress2"
 66 |                 placeholder="Apt. 2"
 67 |                 pattern="[\w\d\s.#]{2,}"
 68 |                 value={data.shipAddress2}
 69 |                 onChange={handleChange}
 70 |                 disabled={data.sameAsBilling}
 71 |             />
 72 | 
 73 |             <label htmlFor="shipCity">City</label>
 74 |             <input
 75 |                 type="text"
 76 |                 id="shipCity"
 77 |                 name="ship-city"
 78 |                 placeholder="New York"
 79 |                 pattern="([A-Z])[\w\s.]{1,}"
 80 |                 value={data.shipCity}
 81 |                 onChange={handleChange}
 82 |                 disabled={data.sameAsBilling}
 83 |             />
 84 | 
 85 |             <label htmlFor="shipState">State</label>
 86 |             <select
 87 |                 id="shipState"
 88 |                 name="shipState"
 89 |                 value={data.shipState}
 90 |                 onChange={handleChange}
 91 |                 disabled={data.sameAsBilling}
 92 |             >
 93 |                 <option value="AL">Alabama</option>
 94 |                 <option value="AK">Alaska</option>
 95 |                 <option value="AZ">Arizona</option>
 96 |                 <option value="AR">Arkansas</option>
 97 |                 <option value="CA">California</option>
 98 |                 <option value="CO">Colorado</option>
 99 |                 <option value="CT">Connecticut</option>
100 |                 <option value="DE">Delaware</option>
101 |                 <option value="DC">District Of Columbia</option>
102 |                 <option value="FL">Florida</option>
103 |                 <option value="GA">Georgia</option>
104 |                 <option value="HI">Hawaii</option>
105 |                 <option value="ID">Idaho</option>
106 |                 <option value="IL">Illinois</option>
107 |                 <option value="IN">Indiana</option>
108 |                 <option value="IA">Iowa</option>
109 |                 <option value="KS">Kansas</option>
110 |                 <option value="KY">Kentucky</option>
111 |                 <option value="LA">Louisiana</option>
112 |                 <option value="ME">Maine</option>
113 |                 <option value="MD">Maryland</option>
114 |                 <option value="MA">Massachusetts</option>
115 |                 <option value="MI">Michigan</option>
116 |                 <option value="MN">Minnesota</option>
117 |                 <option value="MS">Mississippi</option>
118 |                 <option value="MO">Missouri</option>
119 |                 <option value="MT">Montana</option>
120 |                 <option value="NE">Nebraska</option>
121 |                 <option value="NV">Nevada</option>
122 |                 <option value="NH">New Hampshire</option>
123 |                 <option value="NJ">New Jersey</option>
124 |                 <option value="NM">New Mexico</option>
125 |                 <option value="NY">New York</option>
126 |                 <option value="NC">North Carolina</option>
127 |                 <option value="ND">North Dakota</option>
128 |                 <option value="OH">Ohio</option>
129 |                 <option value="OK">Oklahoma</option>
130 |                 <option value="OR">Oregon</option>
131 |                 <option value="PA">Pennsylvania</option>
132 |                 <option value="RI">Rhode Island</option>
133 |                 <option value="SC">South Carolina</option>
134 |                 <option value="SD">South Dakota</option>
135 |                 <option value="TN">Tennessee</option>
136 |                 <option value="TX">Texas</option>
137 |                 <option value="UT">Utah</option>
138 |                 <option value="VT">Vermont</option>
139 |                 <option value="VA">Virginia</option>
140 |                 <option value="WA">Washington</option>
141 |                 <option value="WV">West Virginia</option>
142 |                 <option value="WI">Wisconsin</option>
143 |                 <option value="WY">Wyoming</option>
144 |             </select>
145 | 
146 |             <label htmlFor="shipZipCode">Zip Code</label>
147 |             <input
148 |                 type="text"
149 |                 id="shipZipCode"
150 |                 name="shipZipCode"
151 |                 placeholder="12345"
152 |                 pattern="[0-9]{5}"
153 |                 maxLength="5"
154 |                 value={data.shipZipCode}
155 |                 onChange={handleChange}
156 |                 disabled={data.sameAsBilling}
157 |             />
158 |         </>
159 |     )
160 | 
161 |     return content
162 | }
163 | export default Shipping


--------------------------------------------------------------------------------