I’m using my components as below and I want to check if the inner component is being rendered and take some decisions based on that.
like not rendering the parent components and showing empty-content instead of the inner component without checking the inner data.
is there something like !!DashboardLongTermSuggestedPackages for that?
<Grid xs={12} md={6}>
<DashboardLongTermSuggestedPackages />
</Grid>
NOTICE:
that I want to understand if the inner component is empty and take some decisions based on that, not just not showing empty elements, but to handle other logic too.
2
Usually state elements can be introduced and set based on the same condition that you render the child (DashboardLongTermSuggestedPackages in this case). So that you can use the state element everywhere (isVisible) and render the remaining UI logic.
ex : create [isVisible, setIsVisible] in parent, then pass and setIsVisible inside the child. So the Parent is aware of the current state.
Also, one more way, if you want to know if there is a child for a parent you can use props.children to verify.
<Parent> <Child/> </Parent>
then inside Parent, you can use props.children conditionally.