[[oktatas:web:react|< React]] ====== React - Táblázat ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2022 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== Táblázat generálása tömbből ===== import logo from './logo.svg'; import './App.css'; function App() { let employees = [ {name: "Csendes Pál", salary: 435}, {name: "Erős István", salary: 397}, {name: "Látó Gábor", salary: 374} ] return (
{employees.map( employee => { return ( ) })}
Név Fizetés
{employee.name} {employee.salary}
); } export default App;
===== Táblázat generálása tömbből kulccsal ===== import logo from './logo.svg'; import './App.css'; function App() { let employees = [ {id: 1, name: "Csendes Pál", salary: 435}, {id: 2, name: "Erős István", salary: 397}, {id: 3, name: "Látó Gábor", salary: 374} ] return (
{employees.map( employee => { return ( ) })}
# Név Fizetés
{employee.id} {employee.name} {employee.salary}
); } export default App;
===== Táblázat sorának törlése dinamikusan ===== {{:oktatas:web:react:tablazat_torolheto-sorokkal.png|}} import './App.css'; import { useState } from 'react'; function App() { const employeesOrigi = [ {id: 1, name: "Csendes Pál", salary: 435}, {id: 2, name: "Erős István", salary: 397}, {id: 3, name: "Látó Gábor", salary: 374} ] const [employees, setEmployees] = useState(employeesOrigi); function removeEmployee(id) { let tomb = employees.filter((item) => item.id !== id); setEmployees(tomb); } return (
{employees.map( employee => { return ( ) })}
# Név Fizetés
{employee.id} {employee.name} {employee.salary}
); } export default App;
===== Szerkesztés ===== {{:oktatas:web:react:react_table_edit.png|}} import './App.css'; import { useState } from 'react'; function App() { const employeesOrigi = [ {id: 1, name: "Csendes Pál", salary: 435}, {id: 2, name: "Erős István", salary: 397}, {id: 3, name: "Látó Gábor", salary: 374} ] const [employees, setEmployees] = useState(employeesOrigi); const [modifyVisible, setModifyVisible] = useState(false); const [idForModify, setIdForModify] = useState(); const [nameForModify, setNameForModify] = useState(); const [salaryForModify, setSalaryForModify] = useState(); const [index, setIndex] = useState(); function removeEmployee(id) { let tomb = employees.filter((item) => item.id !== id); setEmployees(tomb); } function modifyEmployee(employee, index) { setModifyVisible(true); setIdForModify(employee.id); setNameForModify(employee.name); setSalaryForModify(employee.salary); setIndex(index); console.log(index); } function onClickSaveButton() { console.log("mentés..."); const emps = employees; emps[index].name = nameForModify; emps[index].salary = salaryForModify; setEmployees(emps); setModifyVisible(false); } return (
{ modifyVisible &&

Módosítás

setIdForModify(e.target.value)} />
setNameForModify(e.target.value)} />
setSalaryForModify(e.target.value)} />
} {employees.map( (employee, index) => { return ( ) })}
# Név Fizetés
{employee.id} {employee.name} {employee.salary}
); } export default App;