Skip to content

Commit e6dc12e

Browse files
committed
changing the practices for core lesson 2 and 3
1 parent 9c2c295 commit e6dc12e

File tree

13 files changed

+350
-218
lines changed

13 files changed

+350
-218
lines changed

react/core/02-state/practice/App.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useState } from 'react'
2+
import { Heading } from '~/Heading'
3+
// import { ConfirmationCode } from './ConfirmationCode.final'
4+
// import { LoginForm } from './LoginForm.final'
5+
import { ConfirmationCode } from './ConfirmationCode'
6+
import { LoginForm } from './LoginForm'
7+
8+
type User = { userId: number }
9+
10+
export function App() {
11+
const [user, setUser] = useState<User | null>(null)
12+
13+
function onSubmit(user: User) {
14+
setUser(user)
15+
}
16+
17+
// Task 2
18+
// Conditionally render the ConfirmationCode when the user object is set
19+
20+
return (
21+
<div>
22+
<Heading>Login</Heading>
23+
<LoginForm onSubmit={onSubmit} />
24+
{/* <ConfirmationCode /> */}
25+
</div>
26+
)
27+
}

react/core/02-state/practice/CartShippingBilling.final.tsx

Lines changed: 0 additions & 86 deletions
This file was deleted.

react/core/02-state/practice/CartShippingBilling.tsx

Lines changed: 0 additions & 91 deletions
This file was deleted.
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { useRef } from 'react'
2+
3+
export function ConfirmationCode() {
4+
const inputRef1 = useRef<HTMLInputElement>(null!)
5+
const inputRef2 = useRef<HTMLInputElement>(null!)
6+
const inputRef3 = useRef<HTMLInputElement>(null!)
7+
const inputRef4 = useRef<HTMLInputElement>(null!)
8+
9+
function onSubmit(event: React.FormEvent<HTMLFormElement>) {
10+
event.preventDefault()
11+
12+
const code =
13+
inputRef1.current.value +
14+
inputRef2.current.value +
15+
inputRef3.current.value +
16+
inputRef4.current.value
17+
18+
// // We don't need state or refs to get the values of a form
19+
// const formData = new FormData(event.currentTarget)
20+
// const v1 = formData.get('input1') as string
21+
// const v2 = formData.get('input2') as string
22+
// const v3 = formData.get('input3') as string
23+
// const v4 = formData.get('input4') as string
24+
// const code = v1 + v2 + v3 + v4
25+
26+
console.log(code)
27+
}
28+
29+
return (
30+
<form onSubmit={onSubmit} className="space-y-3">
31+
<p className="text-center">Enter your verification code:</p>
32+
<div className="flex gap-3 m-auto">
33+
<input
34+
type="text"
35+
name="input1"
36+
className="form-field text-3xl text-center"
37+
autoComplete="off"
38+
ref={inputRef1}
39+
onChange={() => inputRef2.current.focus()}
40+
/>
41+
<input
42+
type="text"
43+
name="input2"
44+
className="form-field text-3xl text-center"
45+
autoComplete="off"
46+
ref={inputRef2}
47+
onChange={() => inputRef3.current.focus()}
48+
/>
49+
<input
50+
type="text"
51+
name="input3"
52+
className="form-field text-3xl text-center"
53+
autoComplete="off"
54+
ref={inputRef3}
55+
onChange={() => inputRef4.current.focus()}
56+
/>
57+
<input
58+
type="text"
59+
name="input4"
60+
className="form-field text-3xl text-center"
61+
autoComplete="off"
62+
ref={inputRef4}
63+
/>
64+
</div>
65+
<div className="w-fit m-auto">
66+
<button type="submit" className="button">
67+
Verify
68+
</button>
69+
</div>
70+
</form>
71+
)
72+
}
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { useRef } from 'react'
2+
3+
export function ConfirmationCode() {
4+
// Task 3
5+
// Make 4 refs (one for each input)
6+
const inputRef1 = useRef<HTMLInputElement>(null!)
7+
8+
// Then remember to attach them to their input DOM and you'll
9+
// need to listen to each input's onChange to know when to
10+
// focus on the next input
11+
12+
function onSubmit(event: React.FormEvent<HTMLFormElement>) {
13+
event.preventDefault()
14+
15+
// const code =
16+
// inputRef1.current.value +
17+
// inputRef2.current.value +
18+
// inputRef3.current.value +
19+
// inputRef4.current.value
20+
21+
// console.log(code)
22+
}
23+
24+
return (
25+
<form onSubmit={onSubmit} className="space-y-3">
26+
<p className="text-center">Enter your verification code:</p>
27+
<div className="flex gap-3 m-auto">
28+
<input
29+
type="text"
30+
name="input1"
31+
className="form-field text-3xl text-center"
32+
autoComplete="off"
33+
// ref={}
34+
// onChange={}
35+
/>
36+
<input
37+
type="text"
38+
name="input2"
39+
className="form-field text-3xl text-center"
40+
autoComplete="off"
41+
/>
42+
<input
43+
type="text"
44+
name="input3"
45+
className="form-field text-3xl text-center"
46+
autoComplete="off"
47+
/>
48+
<input
49+
type="text"
50+
name="input4"
51+
className="form-field text-3xl text-center"
52+
autoComplete="off"
53+
/>
54+
</div>
55+
<div className="w-fit m-auto">
56+
<button type="submit" className="button">
57+
Verify
58+
</button>
59+
</div>
60+
</form>
61+
)
62+
}

react/core/02-state/practice/GUIDE.md

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,43 @@
22

33
## Goals
44

5-
Allow the user to fill out the "Shipping & Billing" form without having to duplicate their inputs when "Same as Shipping" is checked.
6-
7-
1. If the checkbox is unchecked, the user will have to type both shipping and billing info
8-
2. If the checkbox is checked, the user will see the billing info populate as they type into the respective field of the shipping info.
5+
Allow the user to fill out the login form and submit. Then the user will see a confirmation form to enter a 4-digit code.
96

107
## Task 1
118

12-
There is already state for `isSame`. Get the checkbox programmed with an `onChange` event to toggle this boolean state
9+
Open `LoginForm.tsx` and add state for `username` and `password`. There's already some state for `loading` in case you need to see an example. After creating state:
10+
11+
1. Add `value` and `onChange` props to the input fields to make them "controlled"
12+
2. After you do step 1, you should be able to login with any credentials and `console.log` the values from the `handleLogin` function.
13+
3. Notice that `handleLogin` will call `onSubmit` to set some `user` state in the parent component.
1314

1415
## Task 2
1516

16-
Create two states for `billingName` and `billingAddress`. Make these input fields controlled in a way where the `value` of each one is either the billing or shipping information depending on `isSame`.
17+
When the `App` component gets a re-render because the login form set its user state, do some conditional JSX to display the `ConfirmationCode` component instead:
18+
19+
Hint:
20+
21+
```jsx
22+
<div>
23+
{condition & <CompOne /> : <CompTwo />}
24+
</div>
25+
```
26+
27+
## Task 3
28+
29+
In the `ConfirmationCode` component, make 4 refs (one for each input). Then:
30+
31+
1. Attach the refs to the DOM with `ref={inputRef1}`
32+
2. Use `onChange` on each input ref to focus on the next input after someone types a character
33+
34+
Hint:
35+
36+
```
37+
inputRef2.current.focus()
38+
```
39+
40+
3. Enable the code in the `onSubmit` function to `console.log` the confirmation code
1741

1842
## Finished When
1943

20-
You're finished when the form can be submitted and there is a `console.log` that outputs the form values that we want to submit.
44+
You're finished when you can see the `console.log` of the confirmation code

0 commit comments

Comments
 (0)