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?
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));
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));