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

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;

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;

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;

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;