when I try to loop array in render function in react.js, it shows nothing, why?

Question

Here is a code:

  render() {
    return (
        <div
            <div className="container-center">
                <div className="container-center-inner">

                    <div>
                        <div className="container-checkout">
                            <div>
                                <div className="container-cart">
                                {
                                    this.props.cartStore.items.forEach(function(item, i, arr) {


                                        return (
                                            <div className="basket-item" key={i}>
                                                <div>
                                                    <div className="basket-item-image">
                                                        <TShirt className="color-tshirt-small" width="130" height="176" images={item.cartItemTShirt.image} color={item.item.color} />
                                                    </div>

                                                </div>
                                            </div>
                                        )

                                    })
                                }
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    );
}

Container "container-cart" is empty, but this.props.cartStore.items has values, and should work. When I try to execute code before return of render, the all working fine, but when I place it into return, it returns nothing. I think something wrong in loop, but I dont know, any help?

Arman Charan · Accepted Answer · 2017-11-01 02:37:02Z

1

Your first <div> in your return statement is missing a closing tag (>).

I'd recommend cutting a lot of the superfluous tags or compartmentalising your component hierarchy to make such debugging easier in the future.

Also, convention is to use map() rather than forEach() to return an array of components.

See below for a complete example.

// Render.
render() {
  return (
    <div>
      <div className="container-center">
        <div className="container-center-inner">
          <div>
            <div className="container-checkout">
              <div>
                <div className="container-cart">
                  {this.props.cartStore.items.map((item, i, arr) => {
                    return (
                      <BasketItem item={item} i={i}/>
                    )
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// Basket Item.
const BasketItem = ({item, i, arr}) => (
  <div className="basket-item" key={i}>
    <div>
      <div className="basket-item-image">
          <TShirt className="color-tshirt-small" width="130" height="176" images={item.cartItemTShirt.image} color={item.item.color} />
      </div>
    </div>
  </div>
)

edited Nov 1, 2017 at 2:37

answered Nov 1, 2017 at 2:20

Arman Charan

5,8292 gold badges26 silver badges36 bronze badges

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

1 Comment

caiolopes Over a year ago

It also worth to mention that forEach does not return an array but map does, and this is what makes difference.

Collectives™ on Stack Overflow

when I try to loop array in render function in react.js, it shows nothing, why?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related