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

facebook.github.io/react/docs/conditional-rendering.html

maioman
– maioman

2016-11-10 14:35:56 +00:00
Commented Nov 10, 2016 at 14:35 — maioman
– maioman, Commented Nov 10, 2016 at 14:35

Rami Enbashi · Accepted Answer · 2016-11-10 14:50:31Z

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, 2016 at 14:50

Rami Enbashi

3,5561 gold badge21 silver badges21 bronze badges

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

4 Comments

The worm Over a year ago

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 Over a year ago

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 <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `

Joe Clay Over a year ago

@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).

The worm Over a year ago

fair, changed to span

Collectives™ on Stack Overflow

Using an if/else inside react render return

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related