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?

curious as to why you want to determine null from a parent? — Davin Tryon
– Davin Tryon, Commented Jan 29, 2017 at 15:26
In my app I have <Navbar /><Settings /><Content /> I want to determine whether the settings bar renders. If it returns null then I need to add padding to the content component so that the navbar doesn't overlap the content. If the settings bar does render then the padding is not required. I've solved the problem for now by returning a spacer the height of the navbar from the settings component instead of null, but have decided to leave this question up given that it could be handy to know how to do what I was enquiring about. — oldo.nicho
– oldo.nicho, Commented Jan 29, 2017 at 15:47
u can do one thing assign some id or className to setting component, then by using getElementById or class u can check how many children it has, in case of null it will have nothing i guess, i think it should work. — Mayank Shukla
– Mayank Shukla, Commented Jan 29, 2017 at 15:50
yes, you should be able to accomplish this with css alone. since components are modular, only they know whether they return null. That is an important boundary in the abstraction. You probably could extract a rendering function and then check the result, but this isn't a good pattern in general. — Davin Tryon
– Davin Tryon, Commented Jan 29, 2017 at 15:53
Possible duplicate of Is there a way to tell if ReactElement renders "null"? — Stenerson
– Stenerson, Commented Mar 7, 2017 at 13:54

Aral Roca · Accepted Answer · 2020-05-29 08:56:47Z

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

edited May 29, 2020 at 8:56

answered May 29, 2020 at 8:18

Aral Roca

5,9978 gold badges52 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

Determine if react component is null

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related