CODEWITHSUNDEEP
javascripthtmlreactjs
The worm
The worm

Reputation: 5888

Using an if/else inside react render return

I have this javascript inside my react render:

  <p id='canPlay'>
          {this.state.canPlayArray.map(function(num, index){
            return <p key={ index }>Name: {num.name} Date Indicated: {num.dateConfirmed}</p>;
          }, this)}
   </p>

However sometimes, canPlayArray may be empty. How can I say if array.length >0 then render the array ELSE display 'no one has responded'

I cant do an if/else inside the html I dont think AND just before the return() I have:

if (this.state.info){
      output = <Thanks />;
    }

which may stop me doing an if/else there?

thinking of using a ternary operator but not sure where to put it

Upvotes: 1

Views: 2773

Answers (1)

Rami Enbashi
Rami Enbashi

Reputation: 3556

<p id='canPlay'>
  {
    this.state.canPlayArray.length
    ? this.state.canPlayArray.map(function(num, index){
      return <p key={ index }>Name: {num.name} Date Indicated: {num.dateConfirmed}</p>;
    }, this)
    : <p>no one has responded</p>
  }
</p>

Upvotes: 2

Related Questions