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

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

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

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

function 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>;
}

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

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

const 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.