|
1 | 1 | import { useState, React } from "react"; |
2 | 2 |
|
3 | 3 | const App = () => { |
4 | | - //fullname |
5 | | - const [FullnameValue, setFullnameValue] = useState(""); |
6 | | - const [FullNameView, setFullNameView] = useState(""); |
| 4 | + //name load state |
| 5 | + const [nameValue, setnameValue] = useState(""); |
| 6 | + const [NameView, setNameView] = useState(""); |
7 | 7 |
|
8 | | - //email |
| 8 | + //email load state |
9 | 9 | const [EmailValue, setEmailValue] = useState(""); |
10 | 10 | const [EmailView, setEmailView] = useState(""); |
11 | 11 |
|
12 | | - //fullname fucn |
13 | | - const fullnameFucn = (fullnameValue) => { |
14 | | - setFullnameValue(fullnameValue.target.value); |
| 12 | + //name event fucn |
| 13 | + const nameFucn = (nameValue) => { |
| 14 | + setnameValue(nameValue.target.value); |
15 | 15 | }; |
16 | 16 |
|
17 | | - //email fucn |
| 17 | + //email event fucn |
18 | 18 | const emailFucn = (emailValue) => { |
19 | 19 | setEmailValue(emailValue.target.value); |
20 | 20 | }; |
21 | 21 |
|
22 | 22 | //button click fucn |
23 | 23 | const onSubmit = () => { |
24 | | - setFullNameView(FullnameValue); |
| 24 | + setNameView(nameValue); |
25 | 25 | setEmailView(EmailValue); |
26 | 26 | }; |
27 | 27 |
|
28 | 28 | return ( |
29 | 29 | <> |
30 | 30 | <div className="container text-center" style={{ paddingTop: "20%" }}> |
31 | | - <h1>Hi, {FullNameView}</h1> |
| 31 | + <h1>Hi, {NameView}</h1> |
32 | 32 | <h6>{EmailView}</h6> |
33 | 33 | <div className="pt-3 pb-3"> |
34 | 34 | <input |
35 | 35 | type="text" |
36 | | - placeholder="Full name" |
37 | | - onChange={fullnameFucn} |
38 | | - value={FullnameValue} |
| 36 | + placeholder="Enter name" |
| 37 | + onChange={nameFucn} |
| 38 | + value={nameValue} |
39 | 39 | /> |
40 | 40 | <br /> |
41 | 41 | <br /> |
42 | 42 | <input |
43 | 43 | type="email" |
44 | | - placeholder="Email" |
| 44 | + placeholder="Enter email" |
45 | 45 | onChange={emailFucn} |
46 | 46 | value={EmailValue} |
47 | 47 | /> |
|
0 commit comments