Conditional rendering if a prop contains a blank array

Question

I'm trying to conditionally render based on an array having values in it. So basically if this.props.data == [] don't render. If this.props.data == [{data is here}] render.

Things I've tried.

if prop exists

{this.props.data && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===Still Renders===

null

{this.props.data != null && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===Still Renders===

length

{this.props.data.length > 0 && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===Length is not defined===

I'm not a React expert, but I think this is a similar issue to [this question](https://stackoverflow.com/q/30142361/417562). `data` appears to be something other than an array. — lonesomeday, Mar 17 '18 at 16:44

Gleb Kostyunin · Accepted Answer · 2018-03-17T16:52:48.620

9

You can try this:

{this.props.data && !!this.props.data.length && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

So, check that the data is there and than check that it is not an empty array.

But I would recommend to pull it out into a method, because this way your render method can become messy really fast.

edited Mar 17 '18 at 16:52

answered Mar 17 '18 at 16:44

Gleb Kostyunin

3,743
2
19
36

If `length` isn't defined, then it isn't an array. – lonesomeday Mar 17 '18 at 16:47
Yes, I assume that initially the prop can be `undefined` or `null` before the actual data is fetched and later it becomes an array. That is why initially the `length` can be undefined. – Gleb Kostyunin Mar 17 '18 at 16:49
1

this works but returns a 0 if the field doens't render. Any thoughts on removing that? – Shawn Matthews Mar 17 '18 at 16:49
2

ah, that can be fixed by converting the length to boolean, like this: `!!this.props.data.length` or a little verbose, like this `Boolean(this.props.data.length)`. I'll update the answer. – Gleb Kostyunin Mar 17 '18 at 16:52
Brilliant! I will accept the answer when the 2 min timer expires. Thanks for the assist. – Shawn Matthews Mar 17 '18 at 16:55
@GlebKost How can `this.props.data` be `undefined` or `null` and yet also be truthy? – lonesomeday Mar 17 '18 at 16:59
@lonesomeday, It can not. Still, it can be an empty array: `[]` and be truthy. `Boolean([])` returns `true` in js. – Gleb Kostyunin Mar 17 '18 at 22:44
@lonesomeday, so based on the original question, `this.props.data != null && 0 && – Gleb Kostyunin Mar 17 '18 at 22:49
Thanks, I'm new to react and was setting my state as ``` === null``` or ```===false``` but this did the trick. – Noble Polygon Oct 24 '19 at 10:47
I finally got it working. I wrapped the condition rendering into the helper method. Logic and statements are In the methods. I called it like this `{ MultiValidationErrorWrapper(errors) }` and my component is inside like this `export const MultiValidationErrorWrapper = (errors) => { if ((errors) && (errors.length > 0)) { return ; } };` Thanks for help. – Niyongabo Eric Jun 16 '20 at 18:46

Conditional rendering if a prop contains a blank array

1 Answers1