Is there a way to tell if ReactElement renders "null"?

Question

In my JSX, I have a case of a conditional rendering logic - when element A renders something (it's render() function returns something other than null), then also render element B, just above the element A.

Code example (simplified) would look like this:

function render() {     let elemA = (<ElementA someProp={this.someVar} />);      if (elemA.isNull()) {         return (             <div>                 { ...someElements }             </div>         );     }      return (         <div>             { ...someElements }             <ElementB />             { elemA }         </div>     ); } 

So my question is - Is there any way to have the elemA.isNull() check?

Answer 1

No, there's no way to determine what a child will render using React. The standard way to do this is to expose some utility function that says whether A will render.

Something like:

if (AUtils.isStoryValid(story)) {   return <A story={story} />; } else {   return <B story={story} />; }