logo
/
React.Children.map
コンポーネントのchildrenをmapでiterateできるので、それぞれの子要素を任意の要素でラップできる
 import React from "react";

 type Props = {};
 const List: React.FC<Props> = ({ children }) => {
   return (
     <ul>
       {React.Children.map(children, (child) => {
         return <li>{child}</li>;
       })}
     </ul>
   );
 };

 export default function App() {
   return (
     <List>
       <a>1</a>
       <a>2</a>
       <a>3</a>
     </List>
   );
 }