製品リストの再構築🔧

3つの演算子が重複しないようにします.productCadr.js

の3つの演算子に3つの演算子が使用され、コードの毒性が小さすぎる.

コード修正前

   {item.stock === 0 ? (
    <button disabled type="button">
     Out of stock
    </button>
   ) : typeof item.displayPrice === 'string' ? (
    <button type="button">Select</button>
   ) : (
    <button type="button">Add</button>
   )}

コード修正後

   {item.stock === 0 ? (
     <button disabled type="button">
      Out of stock
     </button>
    ) : (
     <button type="button">
      {typeof item.displayPrice === 'string' ? 'Select' : 'Add'}
     </button>
    )}

map関数が戻る前に条件レンダリングを行うproductCadr.js

の上のコードでは、item.stockとitem.displayPriceの条件に関する論理をmap関数に戻す前に書き、条件レンダリングで実現します!!

コード修正前

 {cardInfo.item.map(item => {
          return (
            <div
              className="productCard"
              key={item.id}
              onClick={() => console.log(item)}
            >
              <div className="productCard__header">
                {item.isNew && <span className="new">NEW</span>}
                <img src={item.imageUrl} alt="product image" />
                <div className="symbols">
                  {item.symbolUrl.map(symbolSrc => {
                    return <img src={symbolSrc} alt="" />;
                  })}
                </div>
              </div>
              <div className="productCard__text-block">
                <h2>{item.displayTitle}</h2>
                <p>{item.subtitle}</p>
                <ul>
                  {item.description.map(text => {
                    return <li>{text}</li>;
                  })}
                </ul>
              </div>
              <div className="productCard__bottom">
                <p>${item.displayPrice}</p>
                {item.stock === 0 ? (
                  <button disabled type="button">
                    Out of stock
                  </button>
                ) : (
                  <button type="button">
                    {typeof item.displayPrice === 'string' ? 'Select' : 'Add'}
                  </button>
                )}
              </div>
            </div>
          );
        })}

コード修正後
→ 🤔 これが正しいかどうか分からないハハ

 {cardInfo.item.map(item => {
          const outOfStock = item.stock === 0;
          const isPriceTypeString = typeof item.displayPrice === 'string';

          return (
            <div
              className="productCard"
              key={item.id}
              onClick={() => console.log(item)}
            >
              <div className="productCard__header">
                {item.isNew && <span className="new">NEW</span>}
                <img src={item.imageUrl} alt="product image" />
                <div className="symbols">
                  {item.symbolUrl.map(symbolSrc => {
                    return <img src={symbolSrc} alt="" />;
                  })}
                </div>
              </div>
              <div className="productCard__text-block">
                <h2>{item.displayTitle}</h2>
                <p>{item.subtitle}</p>
                <ul>
                  {item.description.map(text => {
                    return <li>{text}</li>;
                  })}
                </ul>
              </div>
              <div className="productCard__bottom">
                <p>${item.displayPrice}</p>
                {outOfStock ? (
                  <button disabled type="button">
                    Out of stock
                  </button>
                ) : (
                  <button type="button">
                    {isPriceTypeString ? 'Select' : 'Add'}
                  </button>
                )}
              </div>
            </div>
          );
        })}

react childrenの使用productCadr.js

の同じレイアウトに異なる内容が含まれている場合は、react childrenを使用します.

コード修正前

    if (selectedCategory === 'category') {
      return (
        <div className="productCardsGroup">
          <h1>Vitamins</h1>
          {productDatas.map(cardInfo => {
            return <ProductCards cardInfo={cardInfo} />;
          })}

          <h1>Powders</h1>
          {powderDatas.map(cardInfo => {
            return <ProductCards cardInfo={cardInfo} />;
          })}
        </div>
      );
    } else {
      return (
        <div className="productCardsGroup">
          <h1>Eyes</h1>
          {powderDatas.map(cardInfo => {
            return <ProductCards cardInfo={cardInfo} />;
          })}
        </div>
      );
    }