Rendering null in reaction element does not allow css: empty selector

Question

To better explain my question, I will give an example:

Let's say I have two responsive elements that contain each other. Lets you invoke the container Boxand child Stuff. Boxjust displays divwith className="box"which surrounds the children that it defines. Stuffmost of the time it does something, but its function rendercan return nullwhen it decides that nothing should be done.

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

.box:empty {
    display: none;
}

... which should work, except to respond to a tag <noscript>that prevents the browser from viewing the parent .boxas empty ...

Is there an elegant way around this? I would like to keep the emptiness determination logic inside Stuffand Boxsimply "see" on its contents and decide whether he wants anything to show or not.

UPDATE

This script https://jsfiddle.net/69z2wepo/67543/ contains an example of what I'm trying to do. Oddly enough, it works in this fiddle, and the reaction does not display tags <noscript>... why does it output <noscript>to my code? When to respond, choose <noscript>s rendering ?

Answer 1

Problem detected!

react-css-modules (3.7.7). 4.1.0 .

, : https://github.com/gajus/react-css-modules/commit/a9c8de252d5464037090e155c431abfe9f671531