Μεταβίβαση States σε Παιδικά Components στο React

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

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

Ας υποθέσουμε ότι αυτός ο πίνακας βρίσκεται στο component Products. Ας γράψουμε αυτά τα προϊόντα στην κατάσταση του component:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
}

Τώρα ας διατρέξουμε τα προϊόντα με βρόχο και ας τα εμφανίσουμε σε κάποια markup:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <div key={prod.id}>
      name: <span>{prod.name}</span>,
      cost: <span>{prod.cost}</span>
    </div>;
  });
  
  return <div>
    {items}
  </div>;
}

Όπως βλέπετε, το περιεχόμενο του βρόχου map είναι αρκετά πολύπλοκο, ειδικά αν το markup του προϊόντος αναπτυχθεί στο μέλλον. Αυτή η πολυπλοκότητα δυσκολεύει την ανάγνωση, την κατανόηση και τη συντήρηση του κώδικα.

Θα είναι καλύτερα να εξαγάγουμε τον κώδικα που είναι υπεύθυνος για την εμφάνιση του προϊόντος σε ξεχωριστό component. Ας το ονομάσουμε Product. Εδώ είναι ο κώδικας του component μας:

jsxfunction Product({ name, cost }) {
  return <div>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </div>;
}

Ας τώρα μέσα στο component Products στον βρόχο map να χρησιμοποιήσουμε παιδικά components Product:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <Product
      key ={prod.id}
      name={prod.name}
      cost={prod.cost}
    />;
  });
  
  return <div>
    {items}
  </div>;
}

Όπως βλέπετε, τώρα ο κώδικας του βρόχου απλοποιήθηκε και έγινε πιο κατανοητός. Εκτός από αυτό, τώρα για την εμφάνιση του προϊόντος είναι υπεύθυνο ξεχωριστό component, στο οποίο μπορούμε να φτιάξουμε, και αργότερα να επεξεργαστούμε το markup των προϊόντων.

Τεχνικά, καταλήγουμε ότι το γονικό component έχει state με δεδομένα, ενώ τα παιδικά components λαμβάνουν αυτά τα δεδομένα σε μορφή props και τα εμφανίζουν με τον τρόπο που θέλουμε.

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