Using an if/else inside react render return

Question

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

https://facebook.github.io/react/docs/conditional-rendering.html — maioman, Nov 10 '16 at 14:35

score 2 · Accepted Answer · answered Nov 10 '16 at 14:50

2

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

answered Nov 10 '16 at 14:50

Rami Enbashi

3,526
1
19
21

that is really nice. but what I don't get is that even though it works, i still get an error in the console saying: Cannot convert undefined or null to object, meaning that the array i am trying to return from the database is empty – The worm Nov 10 '16 at 14:57
this is erroring now with: Error: processUpdates(): Unable to find child 0 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like
,
, or , or using non-SVG elements in an
– The worm Nov 10 '16 at 15:15
@Theworm: As the error suggests, it's because you're trying to nest `p` tags. [`p` cannot contain block level elements (including other `p` tags).](http://stackoverflow.com/questions/12015804/nesting-p-wont-work-while-nesting-div-will) – Joe Clay Nov 10 '16 at 15:37
fair, changed to span – The worm Nov 10 '16 at 15:38

Using an if/else inside react render return

1 Answers1