How can I loop in a map function in React?

Question

I'm currently mapping through an array of products in the render method returning list elements for each object, I want to create an html select tag for the quantity of products available. Only way I can think of doing this is by looping out an option for every quantity, but this seems to throw a syntax error when using it inside the map function.

I can't seem to find any questions regarding this, the whole loop inside of map function already returning jsx.

 render() {
    const products = this.props.products.map((product, id) => 

            <li key={id} className='products-list-container' > 

                <div className='product-inner-div-wrapper'>

                    <div className='product-title-container'>
                        <p>{product.name}</p>
                    </div>

                    <div className='product-price-container'>
                        <p>{product.price.formatted_with_code}</p>
                    </div>

                    // THIS IS WHERE I TRY TO LOOP AND CREATE AN OPTION 
                    // FOR EVERY QUANTITY
                    <select>
                        {
                            for (var i = 0; i < products.quantity; i++) {
                      return <option value={i}>{i}</option>
                            } 
                        }
                    </select>


                    <div className='product-add-item-container'>
                    { product.is.sold_out ? <p>SOLD OUT</p> :
                        <p onClick={() => this.addItem(product.id)}>add to cart</p>
                    }
                    </div>

                    <div className='products-image-container'>
                        <img src={product.media.source} />
                    </div>


                </div>

            </li>
        );
    return(
            <div className='products-list-container'>
                <ul className='products-list-ul'>
                    {products}
                </ul>
            </div>
        )
}

Possible duplicate of [loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Mayank Shukla, Aug 10 '17 at 09:52
You could do another map with the products.quantity and use the var inside that map. — Karl Taylor, Aug 10 '17 at 09:55
@MayankShukla don't see how ? My code shows a map function outside of the return, which is returning a jsx element already. so how do I loop inside of jsx element that's inside of a map function? the curly brackets don't seem to be working at all in this scenario — john-raymon, Aug 10 '17 at 09:57
@KarlTaylor I tried this products.quantity((quantity, id) => return ); ... but since products.quantity is a number it only returns 0 — john-raymon, Aug 10 '17 at 09:59
@john-raymon issue is we can't use **for loop inside JSX directly, for loop doesn't return anything**, write a separate function for that put for loop inside that and call that function, it will return the desired result. — Mayank Shukla, Aug 10 '17 at 09:59

Kris Selbekk · Accepted Answer · 2017-08-10T10:13:40.773

2

Instead of creating a loop, you can use a map here as well, with some array trickery:

{new Array(product.quantity).fill().map((_, i) => <option>{i}</option>)}

It's not very pretty - but you can pull this out into its own function, and name it descriptively.

edited Aug 10 '17 at 10:13

answered Aug 10 '17 at 09:57

Kris Selbekk

7,438
7
46
73

Thanks, this isn't pretty but it does solve the problem, except its product.quantity, not products. but thanks!! – john-raymon Aug 10 '17 at 10:01
Sorry about the typo. Yeah, it's ugly af, but it doesn't have to be after some refactoring =) – Kris Selbekk Aug 10 '17 at 10:14
So since this is to show a quantity of a product, the code you gave me starts everything from 0, so how do I get this loop to set everything from 1 and up without just adding to the i variable. – john-raymon Aug 12 '17 at 00:12

How can I loop in a map function in React?

1 Answers1