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.