React / Javascript If statement inside map

Question

I'm trying to make a table which will have different coloured rows depending on an attribute which is derived from a map function:

       var tableData = this.state.data.map(attribute =>

            {if(attribute.duplicate.toString()== "true")
                return <tr className="table-success">;
            else
                return <tr className="table-warning">;
            }
                <td> {count++} </td>
                ...
                <td> {attribute.duplicate.toString()} </td>
            </tr>
       );

Now var tableData gets passed through to the actual table:

<div>
        <div>
            <table className="table">
                <tr className="thead-inverse">
                    <th> # </th>
                    ...
                    <th> duplicate </th>
                </tr>
                    {tableData}
            </table>

        </div>
    </div>

But I get the following error:

[INFO] Module build failed: SyntaxError: C:/Users/.../all.js: Unterminated JSX contents (78:14)
[INFO] 
[INFO]   76 | 
[INFO]   77 |             </div>
[INFO] > 78 |         </div>
[INFO]      |               ^

Any ideas what the problem is, or another way to achieve what I'm trying to do?

You can't leave the element open like that, JSX needs elements with closed tags. — MinusFour
– MinusFour, Commented Jan 2, 2018 at 16:52
@MinusFour but everything is being closed, are you refering to the <tr> tag? — gabrriel_bu
– gabrriel_bu, Commented Jan 2, 2018 at 16:56
the return in the if statement exits the map call. The code you wrote just doesn't make much sense. If you re-create this on codesandbox.io then it will be easy for us to help. — aaaaaa
– aaaaaa, Commented Jan 2, 2018 at 16:56

MinusFour · Accepted Answer · 2018-01-02 16:58:01Z

5

Just move the conditional logic inside the className or assign it to a variable and then use it inside the tr.

   var tableData = this.state.data.map(attribute => 
       <tr className={attribute.duplicate.toString() == "true" ? "table-success" : "table-warning"}>
            <td> {count++} </td>
            ...
            <td> {attribute.duplicate.toString()} </td>
        </tr>
   );

answered Jan 2, 2018 at 16:58

MinusFour

14.5k4 gold badges32 silver badges39 bronze badges

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

1 Comment

Kyle Richardson Over a year ago

You should also take a look at [If-Else in JSX[(react-cn.github.io/react/tips/if-else-in-JSX.html). It will explain why you cannot use if else inside JSX. The short is: if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction.

Collectives™ on Stack Overflow

React / Javascript If statement inside map

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related