title: React: Ternary operation in JSX produces "Unexpected token" error
body: <p>I am trying to check if an array is not empty before i start showing it. Here is my code:</p>
  
  <pre><code>{ item2.user.entities.url !== null 
                ? ({item2.user.entities.url.urls.map((item3,index3) =&gt; {
                      return(
                          &lt;a href={item3.expanded_url} target='_blank'&gt;{item3.expanded_url}&lt;/a&gt;
                        )
                      })
                    })
                : null
              }
  </code></pre>
  
  <p>I am not sure. its showing error</p>
  
  <pre><code>babel.min.js:8 Uncaught SyntaxError: Inline Babel script: Unexpected token, expected , (187:23) 
    186 |           { item2.user.entities.url !== null 
  &gt; 187 |               ? ({item2.user.entities.url.urls.map((item3,index3) =&gt; {
        |                        ^
    188 |                     return(
    189 |                         &lt;a href={item3.expanded_url} target='_blank'&gt;{item3.expanded_url}&lt;/a&gt;
    190 |                       )
      at t.le.raise (babel.min.js:8)
      at t.Z.unexpected (babel.min.js:7)
      at t.Z.expect (babel.min.js:7)
      at t.se.parseObj (babel.min.js:8)
      at t.se.parseExprAtom (babel.min.js:8)
      at t.parseExprAtom (babel.min.js:9)
      at t.se.parseExprSubscripts (babel.min.js:8)
      at t.se.parseMaybeUnary (babel.min.js:7)
      at t.se.parseExprOps (babel.min.js:7)
      at t.se.parseMaybeConditional (babel.min.js:7)
  </code></pre>
  
  <p>Unable to understand whats the error</p>