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?

Have you tried defining each branch and determining which is required _before_ the return statement? — pdoherty926, Feb 17 '15 at 17:41
I'm not quite pro at all with render js, but it seems to me that it doesn't fully rewrite javascript: an if statement may not be found within a return statement — axelduch, Feb 17 '15 at 17:41
It appears that in both cases your if-else creates an identical . — tengbretson, Feb 17 '15 at 20:21

score 49 · Accepted Answer · answered Feb 17 '15 at 17:41

49

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

answered Feb 17 '15 at 17:41

nilgun

10,460
4
46
57

2

Can you explain why the if statement cannot write inside the return? – Chrisk8er Jul 17 '16 at 03:57
6

@Chrisk8er Well, it is not a valid syntax neither in js nor in jsx. – nilgun Jul 17 '16 at 19:45
@Chrisk8er yes it is valid javascript, and is used in JSX all the time. See the answer below on how to user ternary statements – S.Kiers Jun 06 '17 at 15:06
For some reason this is not working for me - the else statement never seems to fire – Matt Saunders Aug 14 '17 at 09:39

S.Kiers · Answer 2 · 2018-12-13T18:49:01.813

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

You are talking about the ternary example? If you need else if, I suggest you use a full if/elseif/else block. Ternary operator is usually just syntactic sugar. However, if you need to you can 'nest' ternary operators ( example, in react you *could* do this, but don't!): `condition1 ? "This is the IF" : condition2 ? "This is the ELSE IF" : "This is the ELSE"` — S.Kiers, May 09 '20 at 17:54

How to use if within a map return?

2 Answers2

Linked