在 Vue 框架渲染列表時會有自己的語法 v-for，不過 React 沒有自定義的語法，而是直接使用 JS 的語法

陣列渲染成元素

使用 JS 的 map 把每個 item 渲染出來，組件 Item 需要被代入 key 屬性，

key 必須是唯一值，如陣列改變，才不會再被重新渲染，影響效能

key 如果為 index 也會被重新渲染，只是不會跳出警告，除非沒有唯一值才用 index，或是請後端加上唯一值

List.js

import { Component } from "react";
import Item from "./Item";
class List extends Component {
  render(){
    const steps = [
      { text: 'hello'},
      { text: 'world'},
      { text: 'hello world'}
    ]
    return(
      <ul>
        {steps.map((item, idx) =>
          (<Item key={item.text}>{ item.text }({ idx })</Item>)
        )}
      </ul>
    )
  }
}
export default List;

Item.js

import { Component } from "react";

class Item extends Component {
  render(){
    return (
      <li>{this.props.children}</li>
    )
  }
}

export default Item;

物件渲染成元素

物件使用 Object.keys 先把物件屬性變成陣列，再使用 map 渲染

物件渲染出來的結果順序不一定相同，如果要照資料排序須將資料改為陣列

List.js

import { Component } from "react";
import Item from "./Item";
class List extends Component {
  render(){
    const dog = {
      name: 'bobee',
      age: 12,
      height: 64
    }
    return(
      <ul>
        { Object.keys(dog).map((key) => {
            const value = dog[key];
            return (
              <Item key={value}>{key}: {value}</Item>
            )
        }) }
      </ul>
    )
  }
}
export default List;