< React
React - Táblázat
Táblázat generálása tömbből
- App.js
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 (
<div className="App">
<table>
<thead>
<tr>
<th>Név</th>
<th>Fizetés</th>
</tr>
</thead>
<tbody>
{employees.map( employee => {
return (
<tr>
<td>{employee.name}</td>
<td>{employee.salary}</td>
</tr>
)
})}
</tbody>
</table>
</div>
);
}
export default App;
Táblázat generálása tömbből kulccsal
- App.js
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 (
<div className="App">
<table>
<thead>
<tr>
<th>#</th>
<th>Név</th>
<th>Fizetés</th>
</tr>
</thead>
<tbody>
{employees.map( employee => {
return (
<tr key={employee.id}>
<td>{employee.id}</td>
<td>{employee.name}</td>
<td>{employee.salary}</td>
</tr>
)
})}
</tbody>
</table>
</div>
);
}
export default App;
Táblázat sorának törlése dinamikusan
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 (
<div className="App">
<table>
<thead>
<tr>
<th>#</th>
<th>Név</th>
<th>Fizetés</th>
</tr>
</thead>
<tbody>
{employees.map( employee => {
return (
<tr key={employee.id}>
<td>{employee.id}</td>
<td>{employee.name}</td>
<td>{employee.salary}</td>
<td>
<button onClick={ () => removeEmployee(employee.id)}>Törlés</button>
</td>
</tr>
)
})}
</tbody>
</table>
</div>
);
}
export default App;
Szerkesztés
- App.js
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 (
<div className="App">
{
modifyVisible &&
<div>
<h1>Módosítás</h1>
<div>
<label>Id</label>
<input type="text" value={idForModify}
onChange={e => setIdForModify(e.target.value)} />
</div>
<div>
<label>Név</label>
<input type="text" value={nameForModify}
onChange={e => setNameForModify(e.target.value)} />
</div>
<div>
<label>Fizetés</label>
<input type="text" value={salaryForModify}
onChange={e => setSalaryForModify(e.target.value)} />
</div>
<input type="hidden" value={index} />
<button onClick={onClickSaveButton}>Mentés</button>
</div>
}
<table>
<thead>
<tr>
<th>#</th>
<th>Név</th>
<th>Fizetés</th>
</tr>
</thead>
<tbody>
{employees.map( (employee, index) => {
return (
<tr key={employee.id}>
<td>{employee.id}</td>
<td>{employee.name}</td>
<td>{employee.salary}</td>
<td>
<button onClick={ () => removeEmployee(employee.id)}>Törlés</button>
</td>
<td>
<button onClick={ () => modifyEmployee(employee, index)}>Módosítás</button>
</td>
</tr>
)
})}
</tbody>
</table>
</div>
);
}
export default App;