szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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 =====

<code javascript 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;

</code>

===== Táblázat generálása tömbből kulccsal =====

<code javascript 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;

</code>

===== Táblázat sorának törlése dinamikusan =====



{{:oktatas:web:react:tablazat_torolheto-sorokkal.png|}}

<code javascript>
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;

</code>

===== Szerkesztés =====

{{:oktatas:web:react:react_table_edit.png|}}

<code javascript 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;

</code>