我們也可以在 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