Enum React multiple different child components

user_11740774 0
Viewed 114

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, e.g. in loop like:

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

If yes, which way is correct?

react-functional-component reactjs javascript
1 Answers

Create an array of JSX elements

const childrenArray = [ChildA , ChildB, ChildC];

Render like this

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