added orai

react_form_alap/form/package-lock.json

@@ -11,7 +11,8 @@
         "cra-template": "1.2.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-scripts": "5.0.1",
+        "react-router-dom": "^6.29.0",
+        "react-scripts": "^5.0.1",
         "web-vitals": "^4.2.4"
       }
     },
@@ -2880,6 +2881,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.22.0.tgz",
+      "integrity": "sha512-MBOl8MeOzpK0HQQQshKB7pABXbmyHizdTpqnrIseTbsv0nAepwC2ENZa1aaBExNQcpLoXmWthhak8SABLzvGPw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -12698,10 +12708,43 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.29.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.29.0.tgz",
+      "integrity": "sha512-DXZJoE0q+KyeVw75Ck6GkPxFak63C4fGqZGNijnWgzB/HzSP1ZfTlBj5COaGWwhrMQ/R8bXiq5Ooy4KG+ReyjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.22.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.29.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.29.0.tgz",
+      "integrity": "sha512-pkEbJPATRJ2iotK+wUwHfy0xs2T59YPEN8BQxVCPeBZvK7kfPESRc/nyxzdcxR17hXgUPYx2whMwl+eo9cUdnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.22.0",
+        "react-router": "6.29.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
       "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

react_form_alap/form/package.json

@@ -6,7 +6,8 @@
     "cra-template": "1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^6.29.0",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^4.2.4"
   },
   "scripts": {

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>
+    </>
   );
 }