To better explain my question, I'll use an example:

Let's say I have two react elements, which contain one another. Lets call the container Box, and the child Stuff. Box just renders a div with className="box" which surrounds the children it is given. Stuff most of the time renders something, but its render function can return null when it decides there's nothing to render.

Here's the twist: if <Box> is empty, I don't want to show it at all. So I decided to use css3 selectors, and write something like

.box:empty {
    display: none;
}

... which should work, except react renders a <noscript> tag, which prevents the browser from treating the parent .box element as empty...

Is there an elegant way around this? I'd like to keep the logic of determining emptiness inside of Stuff, and have Box just "look" at its contents and decide whether it wants to show anything or not.

UPDATE

This fiddle https://jsfiddle.net/69z2wepo/67543/ has an example of what I'm trying to do. Strangely, in that fiddle, it works, and react doesn't render <noscript> tags... why does it render <noscript>s in my code? In what cases does react choose to render <noscript>s?