Instructor: We start with a very simple component which renders a single div element. It's visible over here. Imagine if I wanted to have more of those, for instance, five boxes saying "Hello." After we save it, refresh it, we get an issue. The issue is that React expects JSX elements to be wrapped in an enclosing tag.
There's an easy way to fix this, which is wrapping those divs inside of another div. It's going to work just fine, but there's a problem with that. The problem is that we are introducing additional divs only because we need to wrap those divs in something. It gets worse after we do this button over and over again.
There's a way we can fix this. To fix this, import Fragment from react. We can change this enclosing div to a Fragment. It works exactly the same. The difference is that if we check in DevTools, we're going to see that those boxes are not wrapped inside of an any element.
There's also another syntax which allows us to achieve exactly the same goal. We can remove this Fragment import and replace those fragments with an empty HTML element. It's going to work exactly the same. We have those boxes without any HTML element wrapping them.