0

Here is my code. A large portion of it is inside a map. I'm trying to access the first index of the mapped array by using an if statement, but somehow I suspect that it's not meant to be handled that way, not to mention that I'm getting an error. See the if statement closer to the bottom. Didn't want to use a ternary because I thought it would be even more confusing, considering there's already a ternary in the if statement.

render() {
let { findTotal } = this,
{ receiptProducts } = this.props

if(!receiptProducts || !receiptProducts.length) return <Redirect to="/home" />
console.log(receiptProducts)
return (
  <div style={Styles.mainContainer}>
    <div style={Styles.orderWrapper}>
      <div style={Styles.promptContainer}>
        <h1>Your order is being prepared!</h1>
        <p>An email has been sent to your inbox</p>
        <p>Please print for your records</p>
      </div>
      <div style={Styles.productsWrapper}>
        {
          receiptProducts.map((product, i) => {
            let imgName = 'receipt_' + product.name.toLowerCase().replace('cbd ', '').replace('/', '  ').split(' ').slice(0,-1).join('_'),
                imgSrc = './resources/img/' + imgName + '.png'

            let productName = product.brand + " " + product.name.split(' ').slice(0, -1).join(' ')

            return (
              <div key={product.name} style={Styles.productsOuterWrapper}>
                <div style={Styles.productsOrdered}>
                  <img src={imgSrc} style={Styles.image}/>

                  <div key={product.name} style={Styles.productInfo}>
                    <h1 style={Styles.productName}>{productName}</h1>
                    <p style={Styles.chargeNotice}>This charge will appear on your bank statement as: <span style={Styles.chargeNoticeInfo}>insert bank statement info</span></p>
                    <li style={Styles.liStyle}>{product.brand}{product.name}<span style={Styles.productPrice}>${product.price}</span></li>

                    { if(product[i] == product[0]){
                        this.props.expeditedShipping ?
                        <li style={Styles.liStyle}>Shipping & Handling<span style={Styles.productPrice}>${product.shippingPrice}</span></li>
                        <li style={Styles.liStyle}>{this.props.expeditedShipping.name}<span style={Styles.productPrice}>${this.props.expeditedShipping.shippingPrice}</span></li>
                        :
                        <li style={Styles.liStyle}>{product.name}<span style={Styles.productPrice}>${product.shippingPrice}</span></li>
                    } else {
                      <li style={Styles.liStyle}>Shipping & Handling<span style={Styles.productPrice}>${product.shippingPrice}</span></li>
                    }
                  }

                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
      <div>
        <p style={Styles.total}>Total: <span style={Styles.totalPrice}>${findTotal()}</span></p>
      </div>

Current error reads as follows: ERROR in ./src/client/app/cbd-mobile/components/receipt/ReceiptComponent.js Module build failed: SyntaxError: Unexpected token (83:29)

81 | {product.brand}{product.name}${product.price} 82 | {/* Shipping & Handling${product.shippingPrice} */}

83 | { if(product[i] == product[0]){ | ^ 84 | this.props.expeditedShipping ? 85 | Shipping & Handling${product.shippingPrice} 86 | {this.props.expeditedShipping.name}${this.props.expeditedShipping.shippingPrice}

@ ./src/client/app/index.jsx 31:24-83 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/client/app/index.jsx webpack: Failed to compile.

  • Use this `{ condA ? (condB ?
    :
    ) :
    }` Not pretty, but it'll compile. Also, that render method is a total mess. Try splitting up your HTML into more components.     –  Mar 07 '18 at 18:49
  • you can use a function, put all the if-else inside that and call that function from render method, suggesting this option because you don't want to use ternary operator. – Mayank Shukla Mar 07 '18 at 18:59

0 Answers0