Determine if react component is null

Question

I have a component that renders if some conditions are met, otherwise it returns null.

I'd like to know how to determine if the component is returning null from its parent.

I have tried logging the component to see what properties are changing when it is rendered or when returning null but can not detect any difference.

Any suggestions?

Answer 1

You can just use a fallback prop.

Instead of:

function Child(){
 if(something) return null

 return <div>content</div>
}

function Parent(){
 // try to find out if child is null
 return <Child />
}

Just do:

function Child({ fallback = null }){
 if(something) return fallback

 return <div>content</div>
}

function Fallback() {
 return 'some fallback'
}

function Parent(){
 return <Child fallback={<Fallback />} />
}