Ternary inside of a mapping function using ReactJS

Question

I'm using React to display a Material Design Grid List of news articles. Im passing the JSON I receive to this GridList component (this.props.newsArticles), and mapping through each returned result so I can filter the data based on whether it has a hi-def image, then sending the data to MediaTile to get rendered. I'm having a problem with my ternary in GridList module's hasHiDefPictures function. I receive a syntax error.

const Components = {

 MediaTile: React.createClass({
  render: function() {
    return (
      <GridTile
        title={this.props.tile.title}
       >
      <img src={this.props.tile.multimedia[0].url} />
      </GridTile>
    )
   } 
  }),

 GridList: React.createClass({
  render: function() {
    var newsArticles = this.props.newsArticles
    var renderArticles = newsArticles.data.results.map(function(tile, key) {
      return hasHiDefPictures(tile, key)
    })

    function hasHiDefPictures(tile, key) {
      return {tile.multimedia > 3 ? <Components.MediaTile key={key} tile={tile}/> : ""}
    };

    return (
      <div>
        <GridList>
          {renderArticles}
        </GridList>
      </div>
    );
   }
 })
}

Now the only way to get around this syntax error is to wrap that returned value in div's like so:

  function hasHiDefPictures(tile, key) {
    return (
      <div>
        {tile.multimedia > 3 ? <Components.MediaTile key={key} tile={tile}/> : ""}
      </div>
    )
  };

But I do not want to do that. Does anyone have advice on how to get around this problem? I'm still new to react, so there's a good chance that I'm just not handling the data in the proper place. Any help would be appreciated! Thanks!

AlexG · Accepted Answer · 2016-07-02 18:44:49Z

4

You just need to remove the {} around your ternary. {} is useful in JSX (an expression starting with <) to evaluate some JS code, but your array mapping already occur in pure JS code (the beginning of the render function) so it has the regular JS meaning: a block or an object literal.

edited Jul 2, 2016 at 18:44

answered Jul 2, 2016 at 18:37

AlexG

4,1151 gold badge26 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Ternary inside of a mapping function using ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related