React: How to check if a component returns anything or not ( using Javascript )

Question

I'm using my components as below and I want to check if one of inner components is returning anything or not to make style decisions based on that.

<Grid xs={12} md={ Bar() ? 8 : 12 }>
  <Foo />
</Grid>
<Grid xs={12} md={4}>
  <Bar />
</Grid>

There is :empty CSS selector, so you can hide that element. — Justinas
– Justinas, Commented Jul 1, 2024 at 8:42
@Justinas Thanks, but I just made my intention clearer as it's not only about visuals of the page. I want to know if it's empty or not inside my JSX file to be able to take different decisions based on that. — Rocky
– Rocky, Commented Jul 1, 2024 at 8:50

Anu · Accepted Answer · 2024-07-01 09:03:29Z

1

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.

answered Jul 1, 2024 at 9:03

Anu

3891 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rocky Over a year ago

I want to find if a certain child element exist in a parent which has multiple children like: <div> <span>Hello</span> <span> <Bye /> </span> </div>

Collectives™ on Stack Overflow

React: How to check if a component returns anything or not ( using Javascript )

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related