React - Táblázat

Szerző: Sallai András
Copyright © Sallai András, 2022
Licenc: 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 (
    <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;