React render array of objects

Question

I have trouble rendering products array to my page and nothing really shows. I have no idea what to do with it and ive tried it on lesser scale with just li and it worked, but rendering more complex stuff is a problem for me

constructor(props) {
    super(props)
    var products = [
        { name: "Motorhead glasses", price: 300, amount: 1 },
        { name: "Judaspriest glasses", price: 499, amount: 1 }
    ]
    this.state = {products:[]}


}

render() {
    return (
        <div className="order">
            { this.state.products.map(function(product, i) {
                    <div className="order-product" key={i}>

                        <h3 className="order-product_name">{product.name}</h3>
                        <div className="order-product_amount">

                                <p>{product.amount}</p>

                            </div>
                        </div>
                        <div className="order-product_price"><span className="l">Price</span><span className="right">${product.price}</span></div>
                    </div>
                })
            }

            <div className="order-summary">
                <h3>Order Summary</h3>
                <div className="order-summary_summary">
                    <p>Subtotal <span className="price">$300</span></p>
                    <p>Shipping <span className="price">$20</span></p>
                    <hr />
                    <p>Total <span className="price">$320</span></p>
                </div>
            </div>
        </div>

    )
}

}

You're setting this.state.products to be an empty array... — Aron
– Aron, Commented May 16, 2017 at 7:57
@Aron then how should i pass products to state? this seams to be a problem because giving this.state = {products} gives me Error: Order.state: must be set to an object or null — EDGECRUSHER
– EDGECRUSHER, Commented May 16, 2017 at 8:06
that's odd. Are you using a modern browser? What happens when you do this.state = { products: products }? — Aron
– Aron, Commented May 16, 2017 at 8:08

lunochkin · Accepted Answer · 2017-05-16 07:58:35Z

2

It's because you are not returning anything from inner function. You should add return:

{this.state.products.map(function(product, i) {
  return <div className="order-product" key={i}>

      <h3 className="order-product_name">{product.name}</h3>
      <div className="order-product_amount">

              <p>{product.amount}</p>

          </div>
      </div>
      <div className="order-product_price"><span className="l">Price</span><span className="right">${product.price}</span></div>
  </div>
})}

And also you have empty products array in state, as was mentioned in comments.

Replace it to this: this.state = {products: products}

answered May 16, 2017 at 7:58

lunochkin

7844 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

React render array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related