title: How can I loop in a map function in React?
body: <p>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. </p>
  
  <p>I can't seem to find any questions regarding this, the whole loop inside of map function already returning jsx.</p>
  
  <pre><code> render() {
      const products = this.props.products.map((product, id) =&gt; 
  
              &lt;li key={id} className='products-list-container' &gt; 
  
                  &lt;div className='product-inner-div-wrapper'&gt;
  
                      &lt;div className='product-title-container'&gt;
                          &lt;p&gt;{product.name}&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div className='product-price-container'&gt;
                          &lt;p&gt;{product.price.formatted_with_code}&lt;/p&gt;
                      &lt;/div&gt;
  
                      // THIS IS WHERE I TRY TO LOOP AND CREATE AN OPTION 
                      // FOR EVERY QUANTITY
                      &lt;select&gt;
                          {
                              for (var i = 0; i &lt; products.quantity; i++) {
                        return &lt;option value={i}&gt;{i}&lt;/option&gt;
                              } 
                          }
                      &lt;/select&gt;
  
  
                      &lt;div className='product-add-item-container'&gt;
                      { product.is.sold_out ? &lt;p&gt;SOLD OUT&lt;/p&gt; :
                          &lt;p onClick={() =&gt; this.addItem(product.id)}&gt;add to cart&lt;/p&gt;
                      }
                      &lt;/div&gt;
  
                      &lt;div className='products-image-container'&gt;
                          &lt;img src={product.media.source} /&gt;
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
  
              &lt;/li&gt;
          );
      return(
              &lt;div className='products-list-container'&gt;
                  &lt;ul className='products-list-ul'&gt;
                      {products}
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
  }
  </code></pre>