title: "Unexpected token, expected ," when I try to do conditional rendering in react with stateless functional component
body: <p>This is my code:</p>
  
  <pre><code>'use strict'
  
  import React from 'react'
  import { connect } from 'react-redux'
  import { Panel, Col, Row, Well, Button } from 'react-bootstrap'
  
  const Cart = ({ cart }) =&gt; {
  
    const cartItemsList = cart.map(cartArr =&gt; (
      &lt;Panel key={cartArr.id}&gt;
        &lt;Row&gt;
          &lt;Col xs={12} sm={4}&gt;
            &lt;h6&gt;{cartArr.title}&lt;/h6&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Panel&gt;
    ));
  
    return (
      { cart[0] &amp;&amp;
        (&lt;Panel header="Cart" bsStyle="primary"&gt;
          {cartItemsList}
        &lt;/Panel&gt;)
      }
      { !cart[0] &amp;&amp;
        (&lt;div&gt;&lt;/div&gt;)
      }
      // {
      //   cart[0] ? (&lt;Panel header="cart" bsStyle="primary"&gt;{cartItemsList}&lt;/Panel&gt;) : (&lt;div&gt;&lt;/div&gt;);
      // }
    )
  }
  
  const mapStateToProps = state =&gt; ({
    cart: state.cart.cart
  })
  
  export default connect(mapStateToProps)(Cart)
  </code></pre>
  
  <p>As you can see, I'm trying to render <code>cartItemsList</code> nested inside a bootstrap panel component only when <code>cart</code> is not an empty array. However as soon as I use conditional rendering, I get the error "Unexpected token, expected ,". The commented out line of code is the alternative I tried and that gives me the same error. If I get rid of the condition and just render the panel with <code>cartItemsList</code>, it renders without any problems. It's only when I add the condition that I see this error. I was wondering what is causing this error to occur?</p>