Check if an array is empty in React Native

Question

How can I check if an array is empty with a IF statment?

I have this array 'acessos' that's empty

...
constructor(props){
    super(props);
    this.state = {
      acessos:[]
    };
  }
...

Then I'm trying to check if 'acessos' is empty and if it is I push some data in it. I've tried with null but with no results, so how can I check if is empty?

...
if(this.state.acessos === null){
      this.state.acessos.push({'uuid': beacons.uuid, 'date':date});
      this.setState({acessos: this.state.acessos});
} else {
...

@Proz1g it should probably be pointed out that you should not change items in state directly but always use setState instead. The documentation states "Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable." Meaning you should avoid doing things like this.state.acessos.push(...); Technically what you're doing there works fine because you are using setState after, but I wanted to point that out for anyone else happening across this. — jasonmerino
– jasonmerino, Commented May 9, 2017 at 16:49
@jasonmerino so how can I push an element into the array without using this.state.push? — Proz1g
– Proz1g, Commented May 9, 2017 at 17:45
@Proz1g this.setState({ acessos: [...this.state.acessos, { uuid: ... }] }) would accomplish this. But as I mentioned, what you have works because you are calling this.setState after mutating it. I just wanted to make sure it was clear that mutating items in the state directly and not calling this.setState after would be problematic. — jasonmerino
– jasonmerino, Commented May 9, 2017 at 17:57

atitpatel · Accepted Answer · 2017-05-09 14:29:50Z

53

I agree to Julien. Also you don't have to compare it to null. You can write it like

this.state.acessos && this.state.acessos.length > 0

answered May 9, 2017 at 14:29

atitpatel

3,2141 gold badge26 silver badges34 bronze badges

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

Comments

Ramesh R · Accepted Answer · 2021-03-15 17:58:58Z

32

Just check if your array exists and has a length:

if (this.state.products && this.state.products.length) {
     //your code here
}

No need to check this.state.products.length > 0.
0 is falsy anyway, a small performance improvement.

edited Mar 15, 2021 at 17:58

Ramesh R

7,0874 gold badges27 silver badges40 bronze badges

answered Oct 31, 2018 at 8:48

oma

1,89414 silver badges14 bronze badges

Comments

N Kurt · Accepted Answer · 2021-03-18 06:00:05Z

7

If checking the array length as part of conditional rendering in React JSX, remember that if condition is falsy at length check, it will render a 0 as in the following example:

{myArray && myArray.length && (
      <div className="myclass">
        Hello
      </div>
    )}

This is not what we want most of the time. Instead you can modify the JSX as follows:

{myArray && myArray.length? (
      <div className="myclass">
        Hello
      </div>
    ):""}

answered Mar 18, 2021 at 6:00

N Kurt

1541 silver badge3 bronze badges

Comments

Philip John · Accepted Answer · 2018-10-31 08:43:09Z

6

You need not even check for the length since ECMAScript 5.1 You can simply write the same condition as follows.

this.state.acessos && this.state.acessos.length

By default this.state.acessos.length checks if the length is NOT undefined or null or zero.

answered Oct 31, 2018 at 8:43

Philip John

5,63510 gold badges48 silver badges69 bronze badges

Comments

sahba · Accepted Answer · 2022-03-30 00:58:06Z

0

instead ofnull its better to replace "" like this if ( this.state.acessos == ""){}

edited Mar 30, 2022 at 0:58

answered Mar 29, 2022 at 19:52

sahba

394 bronze badges

2 Comments

Christian Over a year ago

Add some comments to your code explaining the why?

Jules Sam. Randolph Over a year ago

acessos is not a string, so why would you compare it to a string? You must provide an informed solution, and not simply an opinion such as "I think that..., it's better to...". I suggest you edit this answer to explain the why, or remove it.

Ihsanu Rahman · Accepted Answer · 2024-03-16 14:35:42Z

0

 Array?console.log('array is empty'):console.log('array have values')

or

if (Array){
   console.log('array is empty')
else{
   console.log('array have values')
}

answered Mar 16, 2024 at 14:35

Ihsanu Rahman

154 bronze badges

Collectives™ on Stack Overflow

Check if an array is empty in React Native

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related