How to check if a React element will render anything

Question

Say I'm making a wrapper component which should only render itself if some child nodes are passed in:

const Wrapper = ({children}) => {
  if (!children) return null
  return <div>{children}</div>
}

The problem is that children could be a Fragment containing null, or an array of nulls. Or a fragment containing a fragment containing...

<Wrapper>hey</Wrapper> // renders <div>hey</div> 👍
<Wrapper>{null}</Wrapper> // renders nothing 👍
<Wrapper>{[null]}</Wrapper> // renders <div/> 👎
<Wrapper><React.Fragment>{null}</React.Fragment></Wrapper> // renders <div/> 👎

Is there a canonical way to check for all these conditions?

Answer 1

Maybe this is what you're looking for :

import ReactDOMServer from 'react-dom/server';

const Wrapper = ({children}) => {
  const markup = ReactDOMServer.renderToStaticMarkup(children);
  if (!markup.trim()) return null;

  return <div>{children}</div>
}

Answer 2

No need to check. They simply don't render.

false, null, undefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>