Reverse children order with React.js

ChildrenReversable.tsx

import { Children, FunctionComponent, ReactNode } from "react";

export interface Props {
  children: ReactNode;
  reverse: boolean;
}

const ChildrenReversable: FunctionComponent<Props> = ({ children, reverse }) => {
  const componentChildren = !reverse
    ? children
    : Children.toArray(children).reverse();

  return <div>{Children.map(componentChildren, (child, i) => child)}</div>;
};

export default ChildrenReversable;