大家好哇～轉眼間來到了鐵人賽第10天，同時也是學習 React 的第10天，透過每日一點一點的紀錄學習內容，希望對 React 的使用方法能有更加深的印象

接續children屬性，React 提供了 React.Children 函式讓我們能夠調用props children的資料

React.Children.map()

map()的功能是什麼
透過函式內所回傳的值組合成一個新的陣列(Array)，並且不會改變原本的陣列，回傳數量會等於原始的長度。

在App.js中寫入陣列(Array)資料

import Card from "./Card";
import "./styles.css";

export default function App() {
  return (
    <Card>
      {(function CardData() {
        return ["小卡1", "小卡2", "小卡3"];
      })()}
    </Card>
  );
}

Card的Component中使用React.Children.map()函式來調用資料

import React from "react";


const Card = (props) => {
  return (
    <div>
      {React.Children.map(props.children, (child,i) => {
        return <h1>{child}</h1>;
      })}
    </div>
  );
};

export default Card;

參考資料：
MDN-Array
React官方文件