Day 18 - Array List

我们也可以在 React 里利用阵列来产出重复的东西，例如 li 。

function FruitList(props) {
 const arr = props.data;
 const listItems = arr.map((val) =>
   <li>{val}</li>
 );
 return <ul>{listItems}</ul>
}
const arr = ["Apple", "Banana", "Coconut"]
const el13= <FruitList data={arr} />
ReactDOM.render(
  el13,
  document.getElementById('root15')
)

以上我们可以注意到在consloe里都有跳一个警告，说每个元件都需要一个唯一的 Key ，这使 React 可以辨识每个元件，特别是在增减更新的时候。

所以，我们改写如下

function FruitList(props) {
 const arr = props.data;
 const listItems = arr.map((val, index) =>
   <li key={index}>{val}</li>
 );
 return <ul>{listItems}</ul>
}
const arr = ["Apple", "Banana", "Coconut"]
const el13= <FruitList data={arr} />
ReactDOM.render(
  el13,
  document.getElementById('root15')
)

如此一来警告就消失了。

不过有人提到使用 index 来作为 id 并不妥适，我想这也是有可能的，大家可以参考别的写法或使用 UUID 唷。

相关文章：

How to create unique keys for React elements?

预告：课程结束的内容是做一个ToDoList, 而我希望能把它改造成从 ToDoList 中随机选一个值出来，我想这会花费我好几天来规划。（因为原本的发想很大，虽然朋友已经写完了，但我想如果我也能写出来，应该就可以无愧地说，我会写一点点程序了:D ）

• 会使用到BS5，所以记得安装喔
• React Bootstrap