Using pseudo :empty css class over conditional render
I was reading an article on React tips and tricks when I came across this entry about using the :empty pseudo CSS class to stop an element from rendering.
The example they give is a component that ...
https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196
Stack Overflow
I was reading an article on React tips and tricks when I came across this entry about using the :empty pseudo CSS class to stop an element from rendering.

The example they give is a component that adds a red border to whatever is rendered as a child

function PostWrapper({ children }) { return <div className="posts-wrapper">{children}</div>; } ... .posts-wrapper { border: solid 1px red; }

with them going on to explain that if children was empty/null/undefined, there would still be a render of red.

I can see why this might be useful in this situation, but I can't particularly see how/why one would try to render a component with a null value, and if one were to do so... Would it not be more readable in a code-sense to write something like:

function PostWrapper({ children }) { if (!children) return; return <div className="posts-wrapper">{children}</div>; }

Ideally I would be more inclined to do this conditional check before I attempt to render the element like:

const UserData = (user) => ({ const {name, age, dob} = user; return !!user && ( <PostWrapper> <div>{name}</div> <div>{age}</div> <div>{dob}</div> </PostWrapper> ); })

Is there benefit to doing the former over the latter?