Data mapping react js

Question

Hello so i'm working on a project where i have thru data and displayed i'm having a problem cause the data isn't consistante like for example not all product have sale i want to display the old price and the new one on the product detail page the product having a sale works fine however the ones that doesn't i keep getting " Cannot read properties of undefined (reading 'old_price')" this is the code i'm currently using:

        <div >
        {filters.filter((product) => product.id === id).map((product) => (
          <div className='product-bigger-wrapper'>
          
            <div class="product-list-wrapper"> 
              <div className="product-detail-container">              
                <div>                    
                  <div className="image-container">
                    <img src={product.image} className="product-detail-image" alt=""/>
                  </div>            
                </div>
                <div className="product-detail-desc">
                  <div className="product-detail-header-title">
                    <h1 className='product-name'>{product.name}</h1>
                  </div>
                  <p className='product-unit-title'> {product.measurement}</p>
                  <div className="product-unit-price-container">
                    
                    <p className='product-unit-price'> ${product.price}</p>
                    { product.sale.old_price !== undefined ?
                      <p className='product-unit-wasprice'> ${product.sale.old_price}</p>
                      : null}


                  </div>              
                  <h4 className='product-description-p'>Product Details: </h4>
                  <div className='description'>
                    <p className='product-description'>{product.description}</p>            
                  </div>          
                </div>
              </div>
          </div>
         
        </div> 
       ))}       
  </div>

and this is an example of product that has the sale part and product that doesn't

First thing, undefined isn't checked like that. Second thing you need optional chaining operator: typeof product.sale?.old_price !== 'undefined' . BTW, you can directly use short-circuit notation: product.sale?.old_price && <p>...</p> — brc-dd
– brc-dd, Commented Aug 8, 2022 at 11:16
Your Product exists. So you can read properties on Product. If they not exist, the value is "undefined". But now you read a property 'old_price' on a property 'sale'. But 'sale' can be undefined. So, React says that it cannot read property old_price from something (product.sale) which might not exist. — BertC
– BertC, Commented Aug 8, 2022 at 11:17

Joliver · Accepted Answer · 2022-08-08 11:25:06Z

1

The problem is the line where you check for old_price being undefined.

{ product.sale.old_price !== undefined ? <p>...</p> : null }
           ^
           this is undefined in your second product object

You can fix it by checking for the sale object first

{ product.sale && product.sale.old_price !== undefined ? <p>...</p> : null }

or preferably use optional chaining

{ product.sale?.old_price !== undefined ? <p>...</p> : null }

answered Aug 8, 2022 at 11:25

Joliver

5293 silver badges11 bronze badges

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

Comments

Sahar · Accepted Answer · 2022-08-08 11:33:47Z

1

you should first check if stale object exists or not , with help of Optional chaining (?.) in javascript

{ product?.sale?.old_price &&
                  <p className='product-unit-wasprice'> `${product.sale.old_price}`</p>
                  }

answered Aug 8, 2022 at 11:33

Sahar

814 bronze badges

Collectives™ on Stack Overflow

Data mapping react js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related