Return a list of elements from a functional component in React
We sometimes just want to return a couple of elements next to one another from a React functional component, without adding a wrapper component which only purpose would be to wrap elements that we want to render.
In this one minute lesson we are going to learn how to solve this problem by returning an array of components and as such - avoid adding unnecessary div wrappers.
Instructor: [00:00] We have a simple React component which displays a box and we can see the result over here. Suppose we'd like to be able to display more of those boxes. We're going to do one, two, and three. After we save it, the page is going to refresh with a failed to compile message because React is expecting adjacent JSX elements to be wrapped in a closing tag.
[00:21] We could fix it by wrapping all of those elements in a div tag. It's going to work just fine, but we are introducing unnecessary divs to our HTML site chart. In a small app such as this one, this is perfectly fine, but in larger applications, we should most likely avoid having unnecessary divs.
[00:39] To solve this problem, instead of returning this div, we throw an array of those div elements, those boxes. Of course, add commas. After we save it, refresh, we are going to see those elements displayed just fine. If we take a look inside of dev tools, we're going to see that because we worked on an array of elements, there is no unnecessary element wrapping those three boxes.
I have a lesson about React Fragments as well: https://egghead.io/lessons/react-use-react-fragments-to-wrap-adjacent-jsx-elements-without-adding-unnecessary-wrappers and I've been using both of those approaches :)
Keys are useful whenever rendering a list of components which order might change (due to an AJAX call, for example), in this simple case - not really, I've decided to omit them for brevity (this is why React complaining about keys is a warning and not an error). Personally I find myself returning an Array instead of Fragment when I see that Fragment would add clutter - not to the DOM, but to my code.
Thanks for the response. I am still convinced it should be mentioned in the lesson that React will show the warning. Those warnings are actually helpful and teaching people to ignore them is not a good approach in my opinion.
I am a bit confounded how you can find it easier to manually maintain those commas there. This is rather a contrived example, but if there is a more robust tree with many props it's fairly easy to miss those commas and where they should actually go. It's your choice in the end and I just hope that not many people will find it attractive enough to use it :)
Hey! Thanks for the feedback!
I think I will revisit this lesson at some point in the future to add keys, I don't want to confuse people who are learning React.
I don't really recommend doing this. You kinda forgot to mention, that if you return array like that, React will complain that you need to supply key prop to every one of those divs.
Why would you be recommending something like this when React.Fragment solves this more gracefully?