Meneruskan State ke Komponen Anak di React

Misalkan kita memiliki array produk:

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

Misalkan array ini berada di dalam komponen Products. Mari simpan produk-produk ini ke dalam state komponen:

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

Sekarang mari kita ulangi produk-produk dengan loop dan tampilkan dalam beberapa 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>;
}

Seperti yang Anda lihat, isi dari loop map kita cukup kompleks, terutama jika markup produk nantinya berkembang. Kompleksitas seperti ini menyulitkan pembacaan, pemahaman, dan pemeliharaan kode.

Akan lebih baik untuk memisahkan kode yang bertanggung jawab untuk menampilkan produk ke dalam komponen terpisah. Mari kita beri nama Product. Berikut kode komponen kita:

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

Sekarang mari di dalam komponen Products pada loop map kita gunakan komponen anak 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>;
}

Seperti yang Anda lihat, kode loop sekarang menjadi lebih sederhana dan lebih mudah dipahami. Selain itu, sekarang untuk menampilkan produk menjadi tanggung jawab komponen terpisah, di mana kita dapat membuat, lalu mengedit markup produk.

Secara teknis, yang terjadi adalah komponen induk memiliki state dengan data, sedangkan komponen anak menerima data ini dalam bentuk props dan menampilkannya dengan cara yang kita inginkan.

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