React：陣列及物件的列表渲染方式

筆記在 React 中，如何將陣列及物件 render成 JSX元素

把陣列 ren 成元素

arr1 = ['learn react', 'learn javascript', 'learn css']
// 在 JSX 裡用 {} 包住:
<div>
  {arr1.map((text, idx, array) => {
    return <li>{text}{idx}</li>
  })}
</div>

map可傳入3個參數 (text, idx, array)
text: 表示array的內容
idx: 表示內容的index
array: 指 array本身，本例即 arr1

---

把物件 ren 成元素

info = {
  name: 'Learn React',
  lesson: 'chapter 1',
  student: 20
}

<div>
  {Object.key(info).map((key) => {
    const value = info[key]
    return (
      <Item>
        {key}: {value}
      </item>
    )
  })}
</div>

Object.keys(info) 等於物件裡的4個內容所組成的陣列
物件沒有map方法，所以要先用 Object.keys(info)取出物件裡所有的key, Object.key(info) 會回傳物件裡的內容。
再使用map方法把每個內容遍歷出來

注意：

使用Object.keys 方法render出來的內容，不保證與原始資料的順序相同，如果要確保順序相同，則資料應該要使用 array

info = [
  {label: name, data: 'Learn React'},
  {label: lesson, data: 'chapter 1'},
  {label: student, data: 20}
]

<div>
  {info.map((item) => {
    return (
      <li>{item.label} {item.data}</li>
    )
  })}
</div>

map render出來的列表記得要加上 key 屬性

• key 屬性：為了要使每個資料與原始資料的連結
• key 建議不要用 index 當key值，使用 index 當key可以消除 console的 warning，但實際上對效能不好
• key 必需在同一個父層裡是唯一值