React'ta Alt Bileşenlere State Aktarımı

Bir ürün dizimiz olduğunu varsayalım:

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

Bu dizinin Products bileşeninde bulunduğunu varsayalım. Bu ürünleri bileşenin state'ine yazalım:

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

Şimdi ürünleri bir döngü ile geçelim ve bunları bir çeşit işaretleme içinde gösterelim:

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

Gördüğünüz gibi, map döngümüzün içeriği yeterince karmaşık, özellikle de ürün işaretlemesi ileride daha da büyürse. Bu tür bir karmaşıklık okumayı, anlamayı ve kodun bakımını zorlaştırır.

Ürünün görüntülenmesinden sorumlu kodu ayrı bir bileşene çıkarmak daha iyi olacaktır. Ona Product adını verelim. İşte bileşenimizin kodu:

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

Şimdi Products bileşeninin içinde map döngüsünde alt bileşenler olarak Product bileşenlerini kullanalım:

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

Gördüğünüz gibi, artık döngünün kodu basitleşti ve anlaşılması daha kolay hale geldi. Ayrıca, artık ürünün görüntülenmesinden ayrı bir bileşen sorumlu, burada ürünlerin işaretlemesini yapabilir ve daha sonra düzenleyebiliriz.

Teknik olarak, ana bileşenin veri içeren bir state'i var ve alt bileşenler bu verileri prop'lar şeklinde alıyor ve onları bizim istediğimiz şekilde görüntülüyor.

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},
];