⭐任務說明

😸 今天任務將學習透過 JavaScript 的陣列方法，來把資料變成 React 元件！magic✨

先來聊聊，什麼時候可能會用到資料陣列？
第一個想到的就是列表清單，先來看看， HTML 的結構會是這樣

<ul>
  <li>這是項目一</li>
  <li>這是項目二</li>
  <li>這是項目三</li>
</ul>

從結構上可以理解到，<li> ... </li> 會重複數次，但是內容會不太一樣
直接來實作看看！

陣列的處理

• 首先我們這邊有一個陣列

const tmpList = [
  "項目一內容",
  "項目二內容",
  "項目三內容",
  "項目四內容",
  "最後一項"
];

那這邊我們使用 map()　這個方法來處理，並回傳一個 jsx 的內容
來改寫前一個任務的範例程式碼

新增一個名為 DataList 元件

function DataList() {
  const listItems = tmpList.map((tmpList) => <li>{tmpList}</li>);
  return <ul>{listItems}</ul>;
}

來來來，看看結果

😸這邊執行完，雖然畫面正確顯示，但在 console 中會顯示以下的訊息

意思是在建立 <ul><li> ... </li></ul> 這樣子的清單時，要把資料的 key 值加上
key 值指的是唯一值，也就是可以被識別的值

😸 這邊要先來調整陣列的內容，增加 id 上來

const tmpList = [
  {
    id: 0,
    name: "karakamin-1號",
    profession: "超級初心者"
  },
  {
    id: 1,
    name: "karakamin-2",
    profession: "吟遊詩人"
  },
  {
    id: 2,
    name: "karakamin-3",
    profession: "吟遊詩人"
  },
  {
    id: 3,
    name: "karakamin-4",
    profession: "大主教"
  },
  {
    id: 4,
    name: "karakamin-5",
    profession: "GM"
  }
];

陣列的內容調整之後，再來處理剛剛的 DataList 元件

這邊 tmpList 的內容會是陣列的型式，所以我們要幫資料綁上一個唯一的 key，以便能正確顯示對應的資料

function DataList() {
  const listItems = tmpList.map((tmpList) => (
    <li key={tmpList.id}>{tmpList.name}</li>
  ));
  return <ul>{listItems}</ul>;
}

😸來來來，看看結果

結語

😸 今天的任務可以了解到運用陣列處理並回傳 JSX ，冒險者繼續加油！

冒險者表示要睡著了 ...