Nesting Array Of Elements As Children Of Each Other

What should the implementation of nestify() be to make following components equivalent to each other? const A = nestify([Foo, Bar, Baz]); const B = props => (

Solution 1:

One idea (assuming the function should handle dynamic arrays) could be a recursive implementation using React.createElement(). The 3rd argument for it is the element's children, thus you could pass in the next array element. So something like this in the component:

const nestify = (components, children, index = 0) =>
  React.createElement(
    components[index],
    {},
    index === components.length - 1
      ? children
      : nestify(components, children, index + 1)
  );

const A = props => nestify([Foo, Bar, Baz], props.children);