(React) If-else statement in foreach loop in JSX

Question

So I have the following:

// Build the component HTML.
return (
  <dl className={ classes }>

    {items.map((item, index) =>
      { item.type === 'dd' ?
        <dd key={ index } index={ index }>{ item.text }</dd>
        :
        <dt className="search-result__description-list__description" key={ index } index={ index }>{ item.text }</dt>
      }
    )}

  </dl>
);

The problem: nothing is rendering. The data is present in items. When I simply log the content without the if-else statement it also returns my data. However, when I use the if-else statement nothing shows up. No errors ether.

Any thoughts?

Everettss · Accepted Answer · 2017-12-10 12:57:10Z

5

You forgot return statement

// Build the component HTML.
return (
  <dl className={ classes }>

    {items.map((item, index) =>
      { return item.type === 'dd' ?
        <dd key={ index } index={ index }>{ item.text }</dd>
        :
        <dt className="search-result__description-list__description" key={ index } index={ index }>{ item.text }</dt>
      }
    )}

  </dl>
);

You can see this fiddle with the same logic: https://jsfiddle.net/69z2wepo/94452/

edited Dec 10, 2017 at 12:57

answered May 20, 2016 at 16:01

Everettss

16.2k9 gold badges78 silver badges106 bronze badges

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

5 Comments

Warre Buysse Over a year ago

I need coffee >-< Thx for the prompt answer!

Everettss Over a year ago

@WarreBuysse coffee can be really helpful in forgotten return keywords. To be specific: fat arrow function (which are borrowed from CoffeeScript). You can write fiddle from my answer without any return word! jsfiddle.net/yeg9et8w

Warre Buysse Over a year ago

Where did you learn to "speak" React so fluently? I'm working the basics here but I want/need to get more advanced in it. Any books/tutorials you can recommend? Or are you just a plain genious? ;-)

Everettss Over a year ago

@WarreBuysse I don't now react (yet). Those topics aren't related with react, those are ES6 concepts. You can read about them in this great book: github.com/getify/You-Dont-Know-JS/blob/master/… Especially this chapter can be helpful for you: github.com/getify/You-Dont-Know-JS/blob/master/…

Everettss Over a year ago

@WarreBuysse You can play more with mentioned fiddle even more (remove unnecessary brackets) jsfiddle.net/zu38wt6t

slugo · Accepted Answer · 2016-05-20 16:07:45Z

1

The problem is in your arrow function, when using the block syntax ({}s following the arrow), you will need to specify the returned value using the return keyword.

answered May 20, 2016 at 16:07

slugo

1,0392 gold badges11 silver badges23 bronze badges

Collectives™ on Stack Overflow

(React) If-else statement in foreach loop in JSX

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related