// === 1 === // TODO: id funktsiyasini amalga oshirish // console.log(id()); // 0; // console.log(id()); // 1; // console.log(id()); // 2; // console.log(id()); // 3; export default function App() { // TODO: Table.tsx ni amalga oshirish return <></>; }

Funktsiya id ni har chaqonida keyingi butun sonli identifikatorni qaytaradigan funksiyani amalga oshirish uchun, hisoblagichning joriy qiymatini saqlash uchun yopilishdan foydalanishingiz mumkin:

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

Agar id funksiyasi o'zi chaqiriladigan va keyingi idni qaytaradigan bo'lsa, quyidagicha qilish mumkin:

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

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

Table.tsx haqida, bu odatda ma'lumotlarni jadval shaklida ko'rsatadigan React komponentidir. Oddiy jadval komponentining misoli:

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>Name</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 komponentida, siz bu Table-ni ishlatishingiz va ma'lumotlarni props orqali uzatishingiz mumkin.