I have a simple react component that directly renders several children:
return (
<header>
<img src={logo}/>
<h1>My Site</h1>
<nav>...</nav>
</header>
);
Are there drawbacks/benefits of rendering this component as an array of components:
return (
<header>
{[
<img key="1" src={logo}/>,
<h1 key="2">My Site</h1>,
<nav key="3">...</nav>
]}
</header>
);
Why would you render as an array? I see no benefit. The drawback is that it's confusing to read, best to keep it as close to HTML syntax as possible until you need to introduce JS.
I don't suggest using an array like that since it impacts readability negatively, and from what I know it does not have any benefits.
I only see this being used when someone is generating components programmatically, like when you're using Array.prototype.map() for example on an array of objects to create a new array of components with props populated from the array of objects.
You shouldn't use an array for this. if you can create smaller components for whatever inside it can be more beneficial for the redability