CODEWITHSUNDEEP
javascriptreactjs
Nirakander
Nirakander

Reputation: 199

Array as a state in React?

How can I make sure my array is not empty when trying to print it out like this? ClientCodeRegional is my array and sometimes it could be empty. 

      {
       this.state.user.ClientCodeRegional[0]?
       <ul>{this.state.user.ClientCodeRegional.map((number) => <li key={number.toString()}>{number}</li>) }</ul>
        :null
      }

Upvotes: 0

Views: 70

Answers (4)

Manish
Manish

Reputation: 170

Check the length of the array ClientCodeRegional and if it is > 0 then show your list with the loop on the ClientCodeRegional. 

 {
   this.state.user.ClientCodeRegional.length>0 && 
     <ul>{this.state.user.ClientCodeRegional.map((number) => 
        <li key={number.toString()}>{number}</li>) }</ul>
 }

Upvotes: 0

tam.dangc
tam.dangc

Reputation: 2032

You should use destructuring assignment for shorter code 

const { ClientCodeRegional } = this.state.user

{
  ClientCodeRegional.length &&
  <ul>
   { ClientCodeRegional.map( number => <li key={number}>{number}</li>) }
  </ul>
}

I've just wondered why do you need to convert number.toString() for key attribute. I think it converts automatically.

Upvotes: 0

Peter Ambruzs
Peter Ambruzs

Reputation: 8213

You can check for the array length.

  {
   this.state.user.ClientCodeRegional.lenght && 
     <ul>{this.state.user.ClientCodeRegional.map((number) => 
        <li key={number.toString()}>{number}</li>) }
     </ul>
  }

Upvotes: 0

dev
dev

Reputation: 313

You can use 

   {
       this.state.user.ClientCodeRegional.length &&
       <ul>
            {this.state.user.ClientCodeRegional.map((number) => 
                <li key={number.toString()}>{number}</li>) }
        </ul>
    }

Upvotes: 2

Related Questions