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?
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 />} />
}