// === 1 === // Κλείσιμο // TODO: υλοποιήστε τη συνάρτηση id // console.log(id()); // 0; // console.log(id()); // 1; // console.log(id()); // 2; // console.log(id()); // 3; export default function App() { // TODO: υλοποιήστε το Table.tsx return <Table />; }

Για την υλοποίηση της λειτουργίας id, η οποία επιστρέφει τον επόμενο ακέραιο αναγνωριστικό σε κάθε κλήση, μπορείτε να χρησιμοποιήσετε ένα κλείσιμο (closure) για να διατηρήσετε την κατάσταση του μετρητή μεταξύ των κλήσεων:

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

const id = createIdGenerator();

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

Όσον αφορά το συστατικό Table.tsx, χωρίς συγκεκριμένες απαιτήσεις, μπορείτε να υλοποιήσετε ένα απλό συστατικό React που εμφανίζει έναν πίνακα με στατικά δεδομένα:

import React from 'react';

const data = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 35 },
];

export default function Table() {
  return (
    <table>
      <thead>
        <tr><th>ID</th><th>Name</th><th>Age</th></tr>
      </thead>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            <td>{row.id}</td>
            <td>{row.name}</td>
            <td>{row.age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}