oktatas:web:react:tablazat
Ez a dokumentum egy előző változata!
Tartalomjegyzék
React - Táblázat
- Szerző: Sallai András
- Copyright © Sallai András, 2022
- Web: https://szit.hu
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;
oktatas/web/react/tablazat.1672070429.txt.gz · Utolsó módosítás: 2022/12/26 17:00 szerkesztette: admin