Reactのマップ関数をどのようにループすることができますか？

Question

私は現在、各オブジェクトのリスト要素を返すレンダリングメソッドの製品の配列を使ってマッピングしています。利用可能な製品の数量のhtml selectタグを作成します。私はこれを行うと思います唯一の方法は、すべての数量のオプションをループすることですが、これは、マップ関数内で使用するときに構文エラーをスローするようです。

私はこれに関する質問は見つからないようですが、マップ関数内のループ全体がすでに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> 
     ) 
} 

Answer 1

代わりにループを作成するのではなく、あなたには、いくつかの配列の策略で、ここにもマップを使用することができます。

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

それは非常にきれいではありません - しかし、あなたは、独自の機能にこれを引き出すことができ、記述的に名前を付けます。