昨天我們透過條件式渲染讓電影清單能夠依據電影名稱顯示相對應的資料，也能直接在object中新增資料來維護，但這還差一點，這還沒有達到毋須修改元件結構自動渲染。今天我們來更近一步地操作看看。

原始資料

先回顧一下我們要使用的資料：

待會要追加的資料：

分檔案

Data.js

這次我們先將資料放在 Data.js 裡頭整理：

待會要使用map method來處理，所以這次我們使用array來處理資料。

export const data = [
  {
    title: '令人討厭的松子的一生',
    year: '2006年',
    minutes: '2 小時 10 分鐘',
    director: '中島哲也',
  },
  {
    title: '鬥陣俱樂部',
    year: '1999 年',
    minutes: '2 小時 19 分鐘',
    director: '大衛·芬奇',
  },
  {
    title: '猜火車',
    year: '1996 年',
    minutes: '1 小時 34 分鐘',
    director: '丹尼·鮑伊',
  },
]

將現有資料整理過就會長這樣子。再來，我們來將我們要用的電影資訊卡製作成元件。

InfoCard.js

function InfoCard({ title, year, minutes, director }) {
  return (
    <li className="info-card">
      <h2>{title}</h2>
      <dl>
        <dt>年份</dt>
        <dd>{year}</dd>
        <dt>片長</dt>
        <dd>{minutes}</dd>
        <dt>導演</dt>
        <dd>{director}</dd>
      </dl>
    </li>
  );
}

export default InfoCard;

在這邊定義所需的元件結構。

App.js

再來，我們回到主要的App.js檔案中來處理遍歷，讓我們追加資料也能夠自動渲染出來。

import InfoCard from './InfoCard';
import { data } from './Data';

function App() {
  const elements = data.map((info) => (
    <InfoCard
    title={info.title}
    year={info.year}
    minutes={info.minutes}
    director={info.director}
  />
  ));
  return <ul>{elements}</ul>;
}

export default App;

在React當中，可以直接使用JavaScript的 map() 方法來遍歷。透過引入的data資料，對data資料遍歷並return props來對我們已經定義好的元件傳遞資料，再將其宣告至變數中儲存。而我們的JSX樹中，僅需將定義好的變數引入即完成了。

做出來長這樣：

資料追加

試著追加資料看看吧。因為資料的動態性都已經串連好了，現在我們可以直接在Data.js檔案中追加資料。

  {
    title: "薄荷糖",
    year: "1999 年",
    minutes: "2 小時 10 分鐘",
    director: "李滄東"
  },
  {
    title: "春風化雨",
    year: "1989 年",
    minutes: "2 小時 8 分鐘",
    director: "彼得·威爾"
  },
  {
    title: "東京教父",
    year: "2003年",
    minutes: "1 小時 32 分鐘",
    director: "今敏"
  }

完。

還沒，有一個警告在叫🚨

但這個明天再聊了。

參考資料

1. React 官方文件 - Rendering List
2. The Joy of React by Josh W Comeau - Iteration