// === 1 === // TODO: īstenot id funkciju // console.log(id()); // 0; // console.log(id()); // 1; // console.log(id()); // 2; // console.log(id()); // 3; export default function App() { // TODO: īstenot Table.tsx return <></>; }

Lai īstenotu funkciju id, kas katru reizi atgriež nākamo vesela skaitļa identifikatoru, vari izmantot slēgumu (closure), lai saglabātu skaitītāja pašreizējo vērtību:

function id() {
  let counter = 0;
  return function() {
    return counter++;
  };
}

const getId = id();
console.log(getId()); // 0
console.log(getId()); // 1
console.log(getId()); // 2
console.log(getId()); // 3

Ja vēlies, lai funkcija id būtu pašsākļoša un atgrieztu nākamo id, vari to izdarīt šādi:

const id = (() => {
  let counter = 0;
  return () => counter++;
})();

console.log(id()); // 0
console.log(id()); // 1
console.log(id()); // 2
console.log(id()); // 3

Par Table.tsx, tas ir React komponent, kas parasti attēlo datus tabulas formātā. Šeit ir vienkāršs piemērs tabulas komponentam:

import React from 'react';

interface TableProps {
  data: Array<{ id: number; name: string }>;
}

const Table: React.FC<TableProps> = ({ data }) => {
  return (
    <table>
      <thead>
        <tr><th>ID</th><th>Vārds</th></tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

App komponentā vari izmantot šo Table un nodot datus caur props.