If conditional check in react jsx for empty values [es6]

Question

I have an array

const myArray = this.props.values.students;

How can I display none if the array is empty?

This is what I'm currently using...

<p>{this.props.values.students ? myArray : 'None' }</p>

It doesn't seem to render 'None' if the array is in-fact empty. How can I make this work?

Check the length of the array? {this.props.values.students.length ? ... : 'None'} — Andreas Louv
– Andreas Louv, Commented May 16, 2016 at 16:21

Andreas Louv · Accepted Answer · 2016-05-16 16:24:08Z

10

The problem is that an empty array is not a falsy value:

if ([]) {
  console.log('truly - this will happen');
}
else {
  console.log('false - this will *never* happen');
}

You can however check the length of the array, which will give a falsy value when empty (0)

<p>{this.props.values.students.length ? myArray : 'None' }</p>

answered May 16, 2016 at 16:24

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

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

1 Comment

Johnny Magrippis Over a year ago

Very clear explanation! Did you mean "truthy" instead of "truly"? Also, might be worth using myArray.length at that point, for further clarity/brevity.

Collectives™ on Stack Overflow

If conditional check in react jsx for empty values [es6]

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