CODEWITHSUNDEEP
javascriptreactjs
Jordan V
Jordan V

Reputation: 117

Ternary inside of a mapping function using ReactJS

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!

Upvotes: 2

Views: 863

Answers (1)

AlexG
AlexG

Reputation: 4065

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.

Upvotes: 4

Related Questions