Πίνακας για τη δημιουργία θυγατρικών στοιχείων στο React

Ας υποθέσουμε ότι έχουμε έναν πίνακα με προϊόντα:

jsxconst prods = [
  {id: id(), name: 'product1', cost: 100},
  {id: id(), name: 'product2', cost: 200},
  {id: id(), name: 'product3', cost: 300},
];

Ας εμφανίσουμε στην οθόνη τρία στοιχεία Product, περνώντας τα δεδομένα από τον πίνακα μας στις ιδιότητες. Προς το παρόν δεν θα χρησιμοποιήσουμε βρόχο, αλλά απλά θα προσπελαύνουμε τα στοιχεία του πίνακα και του αντικειμένου:

jsxfunction App() {
  return <div>
    <Product name={prods[0].name} cost={prods[0].cost} />
    <Product name={prods[1].name} cost={prods[1].cost} />
    <Product name={prods[2].name} cost={prods[2].cost} />
  </div>;
}

Задание 1

Δημιουργήστε ένα στοιχείο User που να εμφανίζει τα δεδομένα του χρήστη στην οθόνη. Ας είναι αυτά τα δεδομένα το όνομα, το επώνυμό και η ηλικία. Διαμορφώστε τα δεδομένα του χρήστη με τη μορφή της ετικέτας tr, που να περιέχει τρεις ετικέτες td.

Задание 2

Στο στοιχείο App δίνεται ο ακόλουθος πίνακας:

jsxconst users = [
  {id: id(), name: 'user1', surn: 'surn1', age: 30},
  {id: id(), name: 'user2', surn: 'surn2', age: 31},
  {id: id(), name: 'user3', surn: 'surn3', age: 32},
];

Χρησιμοποιώντας αυτόν τον πίνακα, εμφανίστε τρεις χρήστες. Διαμορφώστε την εμφάνισή τους με τη μορφή πίνακα table.