List Rendering ใน React

List Rendering คืออะไร?

List Rendering คือการแสดงผลรายการข้อมูล (array) ในรูปแบบ UI เช่น รายชื่อ, ตาราง, รายการสินค้า ฯลฯ โดยใช้การวนลูปใน JSX

---

การใช้ map() ใน JSX

const users = [
  { id: 1, name: "Aom" },
  { id: 2, name: "Bee" },
];

return (
  <ul>
    {users.map(user => <li key={user.id}>{user.name}</li>)}
  </ul>
);

---

การกำหนด key ที่ถูกต้อง

• ควรใช้ key ที่ไม่ซ้ำกันในแต่ละ element (เช่น id)
• หลีกเลี่ยงการใช้ index เป็น key ถ้าข้อมูลมีการเปลี่ยนแปลงบ่อย

{
  items.map(item => <div key={item.id}>{item.name}</div>);
}

---

ตัวอย่างแสดงรายการข้อมูลแบบต่างๆ

a) Array of string

const fruits = ["Apple", "Banana", "Orange"];
return (
  <ul>
    {fruits.map(fruit => <li key={fruit}>{fruit}</li>)}
  </ul>
);

b) Array of object

const products = [
  { id: 1, name: "iPhone" },
  { id: 2, name: "iPad" },
];
return (
  <ul>
    {products.map(p => <li key={p.id}>{p.name}</li>)}
  </ul>
);

c) Nested list (render ซ้อน)

const categories = [
  { name: "ผลไม้", items: ["Apple", "Banana"] },
  { name: "ขนม", items: ["Cookie"] },
];
return (
  <div>
    {categories.map(cat => (
      <div key={cat.name}>
        <h3>{cat.name}</h3>
        <ul>
          {cat.items.map(item => <li key={item}>{item}</li>)}
        </ul>
      </div>
    ))}
  </div>
);

---

Best Practice และข้อควรระวัง

• กำหนด key ที่ unique เสมอ
• หลีกเลี่ยงการใช้ index เป็น key ในกรณีข้อมูลเปลี่ยนแปลงได้
• แยก component ย่อยถ้าการ render ซับซ้อน

---

เปรียบเทียบกับแนวทางเก่า

// Class Component
class ProductList
  extends React.Component<{ products: { id: number; name: string }[] }>
{
  render() {
    return (
      <ul>
        {this.props.products.map(p => <li key={p.id}>{p.name}</li>)}
      </ul>
    );
  }
}

Function Component + map() ใน JSX กระชับกว่าและเหมาะกับแนวทางสมัยใหม่

---

สรุปแนวทางที่แนะนำ

• ใช้ map() ใน JSX เป็นหลัก
• กำหนด key ที่ unique เสมอ
• แยก component ย่อยตามความเหมาะสม

List Rendering คือพื้นฐานสำคัญของการแสดงผลข้อมูลใน React สมัยใหม่ ฝึกใช้ให้คล่องเพื่อสร้าง UI ที่ยืดหยุ่นและดูแลง่าย