How to use if within a map return?

Question

I need to generate diffrent reactJS code based on datamodel but I get

In file "~/Scripts/Grid.jsx": Parse Error: Line 13: Unexpected token if (at line 13 column 15) Line: 52 Column:3

With this code

var GridRow = React.createClass({     render: function() {         var row;          row = this.props.cells.map(function(cell, i) {             return (                 if(cell.URL != null && cell.URL.length > 0){                     <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>                         }                 else {                     <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>                 }             );         }.bind(this));          return (             <tr>                 {row}             </tr>         );     } }); 

The render part seems to be really limited in how it can be used?

Answer 1

You put return statement inside if clause like so:

    row = this.props.cells.map(function(cell, i) {          if(cell.URL != null && cell.URL.length > 0){             return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>;                 }         else {             return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>;         }      }.bind(this)); 

Answer 2

You could also use a ternary (inline if/else) statement. It might look like this:

row = this.props.cells.map(function(cell, i) {     return (cell.URL != null && cell.URL.length > 0) ?          (<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) :         (<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) }.bind(this)); 

or es6

row = this.props.cells.map((cell, i) => (cell.URL != null && cell.URL.length > 0) ?          (<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) :         (<td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>) ); 

but, for readability, I would suggest nilgun's answer.

Although I would remove the else statement, since it is redundant. You could also remove the curly brackets, this is a matter of preference.

row = this.props.cells.map(function(cell, i) {     if(cell.URL != null && cell.URL.length > 0)         return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>;             return <td className={cell.Meta.HTMLClass} key={i}>{cell.Text}</td>; }.bind(this));