Here is the code snippet:
'use strict'
import React from 'react'
import { connect } from 'react-redux'
import { Panel, Col, Row, Well, Button } from 'react-bootstrap'
const Cart = ({ cart }) => {
const cartItemsList = cart.map(cartArr => (
<Panel key={cartArr.id}>
<Row>
<Col xs={12} sm={4}>
<h6>{cartArr.title}</h6>
</Col>
</Row>
</Panel>
));
return (
{ cart[0] &&
(<Panel header="Cart" bsStyle="primary">
{cartItemsList}
</Panel>)
}
{ !cart[0] &&
(<div></div>)
}
// {
// cart[0] ? (<Panel header="cart" bsStyle="primary">{cartItemsList}</Panel>) : (<div></div>);
// }
)
}
const mapStateToProps = state => ({
cart: state.cart.cart
})
export default connect(mapStateToProps)(Cart)
The issue I am facing is related to conditional rendering. Whenever I try to render cartItemsList within a Bootstrap panel only when cart is not an empty array, I encounter the error "Unexpected token, expected ,". The alternative approach in the commented-out code also triggers the same error. If I remove the condition and directly render the panel with cartItemsList, everything works fine. It's only when adding the condition that the error arises. Can you help me understand why this error occurs?