Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:react:szolgaltatas [2023/06/09 19:43] – [Employees.js] admin
+++ oktatas:web:react:szolgaltatas [2023/06/09 19:56] (aktuális) – [Employees.js] admin
@@ Sor 36: / Sor 36: @@
 const Employees = () => {
-    const [employeeList, setEmployeeList] = useState();
+    const [employeeList, setEmployeeList] = useState([]);
     return (
@@ Sor 55: / Sor 55: @@
 const Employees = () => {
-    const [employeeList, setEmployeeList] = useState();
+    const [employeeList, setEmployeeList] = useState([]);
     useEffect(() => {
@@ Sor 72: / Sor 72: @@
 A get() metódus egy Promise-t ad vissza, így futtatjuk rajta a then() függvényt.
+Rendereljük a táblázatot:
+<code javascript src/pages/Employees.js>
+import { useEffect, useState } from "react";
+import { getEmployees } from "../services/api";
+const Employees = () => {
+    const [employeeList, setEmployeeList] = useState([]);
+    useEffect(() => {
+        getEmployees().then(res => setEmployeeList(res.data))
+    }, []);
+    return (
+    <div class="container">
+        <h1>Dolgozók</h1>
+        <table class="table table-striped">
+            <thead>
+                <tr>
+                    <th>Id</th>
+                    <th>Név</th>
+                    <th>Település</th>
+                    <th>Fizetés</th>
+                </tr>
+            </thead>
+            <tbody>
+                {employeeList.map(emp => (
+                    <tr key={emp.id}>
+                        <td>{emp.id}</td>
+                        <td>{emp.name}</td>
+                        <td>{emp.city}</td>
+                        <td>{emp.salary}</td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    </div>
+    );
+};
+export default Employees;
+</code>