可以在JSX中放入陣列(listItems)

不過以這樣的寫法console中會顯示錯誤訊息
正確的寫法：陣列中的每一個元素都應該要有key屬性，key屬性的用途主要是讓React能夠精準定位陣列中的每一個元素，進而提升渲染效率。

有兩個常見的陣列方法，map()以及filter()。

首先map()是陣列的方法，它會「把陣列中的每一個元素，都拿去執行一次指定的函式」，然後回傳一個新的陣列。

function App() {
  
  const listItems =[
    {content: '張三', id: 'abc'},
    {content: '李四', id: 'xyz'},
    {content: '王五', id: 'qaz'},
  ];

  return (
    <>
    {listItems.map((item) => {
      return <div key ={item.id}>{item.content}</div>
    })}
    </> 
  )
}

以此段程式碼維說例：

在 React 裡常用 map() 來「顯示列表」

因為要顯示多個 或 時，不能手動一個個寫。
可以用 .map() 根據陣列自動產生多個元件。

而filter()方法可以從陣列中「篩選出」符合條件的元素，並產生一個新的陣列。

語法是若回傳 true → 保留在新的陣列中，若回傳 false → 被過濾掉、不會出現在結果裡

array.filter((元素) => {
  return 條件式; // true 才會留下來
});

以下為說例，在filter()中寫 if判斷式

function App() {
  
  const listItems = [
    {content: '張三', id: 'abc'},
    {content: '李四', id: 'xyz'},
    {content: '王五', id: 'qaz'},
  ];
  const filterItems = listItems.filter((item)=> {
    if (item.content !== '李四'){
      return true
    }
  })

  return (
    <>
    {filterItems.map((item) => {
      return <div key ={item.id}>{item.content}</div>
    })}
    </> 
  )
}

學習影片出處：https://youtu.be/aBTiZfShe-4?si=Igb2aKz3sefA97A5