added orai

react_form_alap/form/src/25_02_04/Adatok.jsx

@@ -0,0 +1,16 @@
+function Adatok(props){
+    return (
+        <>
+            <h1>{props.user.name}</h1>
+            <p>{props.user.email}</p>
+            <p>{props.user.phone}</p>
+            <p>{props.user.job}</p>
+            <p>{props.user.language_certificate}</p>
+            <p>
+                {props.user.motivation}
+            </p>
+        </>
+    )
+}
+
+export default Adatok;

react_form_alap/form/src/25_02_04/Urlap.jsx

@@ -1,13 +1,26 @@
 import { useState } from "react";
+import Adatok from "./Adatok";
 
 
 function Urlap(){
     const [user, setUser] = useState({motivation: "ide írd a motivációs leveled"});
 
     let feldolgoz = () => {
+        setUser(
+            {
+                ...user,
+                submitted: true
+            }
+        );
+
         alert(`
             A user neve: ${user.name}
-            A user telefonszáma: ${user.phone}`);
+            A user email címe: ${user.email}
+            A user telefonszáma: ${user.phone}
+            A user foglalkozása: ${user.job}
+            A user nyelvtudása: ${user.language_certificate}
+            A user motivációs levele: ${user.motivation}
+        `);
     }
 
     let eventHandling = (event) => {
@@ -20,8 +33,9 @@ function Urlap(){
          });
     }
 
-    return (
-        <form onSubmit={feldolgoz}>
+    if (!user.submitted){
+        return (
+            <form onSubmit={feldolgoz}>
             <label>Név: </label>
             <input type="text" name="name" value={user.name} onChange={(event) => eventHandling(event)}></input>
             <br/>
@@ -38,11 +52,21 @@ function Urlap(){
             <input type="text" name="job" value={user.job} onChange={(event) => eventHandling(event)}></input>
             <br/>
 
-            <select>
-                <option value={'A'}>Alap</option>
-                <option value={'B'}>Közép</option>
-                <option value={'C'}>Felső</option>
-            </select>
+            <label>Nyelvtudási szint</label>
+            <br/>
+
+            <label>Alapfok:</label>
+            <input type="radio" name="language_certificate" value={'A'} onChange={(event) => eventHandling(event)}></input>
+            <br/>
+
+            <label>Középfok:</label>
+            <input type="radio" name="language_certificate" value={'B'} onChange={(event) => eventHandling(event)}></input>
+            <br/>
+
+            <label>Felsőfok:</label>
+            <input type="radio" name="language_certificate" value={'C'} onChange={(event) => eventHandling(event)}></input>
+            <br/>
+            
             <br/>
 
             <textarea value={user.motivation} name="motivation" onChange={(event) => eventHandling(event)}>
@@ -51,6 +75,13 @@ function Urlap(){
 
             <input type="submit" />
         </form>
+        )
+    }
+
+    return (
+        <>
+            <Adatok user={user}></Adatok>
+        </>
     )
 }
 

react_form_alap/form/src/App.js

@@ -5,7 +5,9 @@ import Urlap from "./25_02_04/Urlap"
 
 function App() {
   return (
-    <Urlap></Urlap>
+    <>
+      <Urlap></Urlap>
+    </>
   );
 }