Array.prototype.{map, reduce, join} 에 착안한 선언적 리액트 컴포넌트 만들기

List.js

const arr = [
  { id: 1, text: "abc" },
  { id: 2, text: "def" },
  { id: 3, text: "ghi" },
];

const Map = ({ list, children }) => <>{list.map((el) => children(el))}</>;

const Join = ({ separator, children }) => {
  // const [Frag] = React.Children.toArray(children);

  // console.log(Frag);

  // const L = React.Children.map(Frag, (Comp, i) => {
  //   console.log(i);

  //   return Comp;
  // });

  // console.log(L);

  console.log(children);

  return <div> {children}</div>;
};

const List = () => (
  <ul>
    <Join separator={<br />}>
      <Map list={arr}>{({ id, text }) => <li key={id}>{text}</li>}</Map>
    </Join>
  </ul>
);

Reference

https://stackoverflow.com/questions/34034038/how-to-render-react-components-by-using-map-and-join
react-if: https://github.com/romac/react-if