React: Render multiple components without a wrapping element

[Prinzhorn]

I haven't found a duplicate issue, only this post https://groups.google.com/forum/#!searchin/reactjs/render$20multiple/reactjs/pHNJe8trFOg/J-zd4jxAkJ4J

I have a valid use case and like to share it.

I'm building a framework for storytelling based on react. Every single element is positioned fixed as I've written a custom layout engine and need full control over everything. My entry level structure looks something like this

<Story>
    <Grid />
    <UI />
</Story>

<Grid> renders all the actual items (<GridItem>) of the story (text, images, videos, etc.). <UI /> renders UI elements that are common to every story. For example a <VolumeControl> for controling the volume of audio/video items.

If I'd render the structure as given above, this would be the result

<div>
    <div>
        <!--list of GridItems-->
    </div>
    <div>
        <!--list of UI components-->
    </div>
</div>

Since everything is positioned fixed, this does not work. The UI layer covers everything, making it unusable (e.g. can't click on videos). That's why I'm currently forced to do the following in the render method of Story

<div>
    <Grid />
    <VolumeControl />
    <Navigation />
    <ShareButtons />
</div>

This works but is ugly as I lose separation. I don't want the Story component to have to know about every UI component. Sth. like a virtual <Fragment> component that renders it's children without a wrapper element would solve the problem as I could return it from the <UI> component.

I know this is a rare use-case, I'm rather talented at reaching the edge cases of every framework I touch.

Funny how writing down these things sometimes magically makes your brain do useful stuff. I found another workaround. I'm using visiblity:none on the UI layer and visibility:visible on the UI components. But it's a hack, nothing more.

[gaearon]

I believe this to be a duplicate of #2127.

[Prinzhorn]

I believe this to be a duplicate of #2127.

Absolutely. I knew there had to be one but I couldn't find it (found it some weeks ago). Closing this and I'll explicitly link link it from the other issue as well to point to my use-case.

[IUnknown68]

@Prinzhorn Just stumbled across this, and even that you probably don't need any workaround anymore, I believe I know another one: Setting the height of the enclosing divs to 0 and adding overflow:visible to them should still show the content, but not the enclosing div anymore.
Edit: It's probably enough to do this for the UI-div.