The worm The worm - 1 month ago 7
HTML Question

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

Answer
<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>