React showing 0 instead of nothing with short-circuit (&&) conditional component

reactjs components short-circuiting
Gurnzbot picture Gurnzbot · Oct 29, 2018 · Viewed 11k times · Source

I have the following simple short-circuit statement that should show either a component or nothing:

{profileTypesLoading && <GeneralLoader />}

If the statement is false, it renders a 0 instead of nothing.

I have done a console.log(profileTypesLoading) just to see quickly what the status of the profileTypesLoading property is and it's either 1 or 0 as expected. 0 should be false... causing nothing to render. Right?

Any idea why this would happen?

Answer

enapupe picture enapupe · Oct 29, 2018

Since your condition is falsy and so doesn't return the second argument (<GeneralLoader />), it will return profileTypesLoading, which is a number, so react will render it because React skips rendering for anything that is typeof boolean or undefined and will render anything that is typeof string or number:

To make it safe, you can either use a ternary expression {condition ? <Component /> : null} or boolean cast your condition like {!!condition && <Component />}

Related questions

React component initialize state from props

In React, are there any real differences between these two implementations? Some friends tell me that the FirstComponent is the pattern, but I don't see why. The SecondComponent seems simpler because the render is called only once. First: import React, { …

Read More
How to map an array of objects in React

I have an array of objects. I would like to map this array of objects. I know how to map an array, but can't figure out how to map an array of objects. Here is what I have done so …

Read More
Checking for Undefined In React

I have a scenario where I'm passing data from a reducer into my react state. data: { "id": 1, "title": "Test", "content": { "body": "sdfsdf" "image": "http://example.com" } } Using componentWillRecieveProps, this works perfectly for retrieving the title. componentWillReceiveProps(nextProps) { this.setState({ title: …

Read More