Enum React multiple different child components

Question

I have following functional component without any props with different children:

<Parent>
  <ChildA />
  <ChildB />
  ...
  <ChildG />
</Parent>

Is there any way to write all children in Parent component not manually, eg in loop like:

<Parent>
  {childrenArray.map(child => <Child>}
</Parent>

If yes, which way is correct?

Answer 1

Create an array of JSX elements

const childrenArray = [ChildA , ChildB, ChildC];

Render like this

<Parent>
  {childrenArray.map(Child => <Child />)}
</Parent>