A List of Components as Children in React

Alex | Last updated: October 1, 2023

This is another one of those things I wish I learned sooner.

<WrapperComponent>
  [
    <ChildComponent1>
    <ChildComponent2>
    <ChildComponent3>
  ]
</WrapperComponent>

And it will render!

Just make sure to remember to add keys to your list-rendered components (as you would with .map), otherwise React will scream at you.

<WrapperComponent>
  [
    <ChildComponent1 key={`use-a-key-that-makes-sense-1`}>
    <ChildComponent2 key={`use-a-key-that-makes-sense-2`}>
    <ChildComponent3 key={`use-a-key-that-makes-sense-3`}>
  ]
</WrapperComponent>