I can't create a condition in react to do a validation

Question

I have a problem here in React, I need to make a condition like it is in line 66 and 67, but it does not let me add the one that is in line 68, for when something happens execute one or the other, I need to apply the same condition as onClick product.showPrice.offerPrice> 0

UPDATEEE

I need to apply the same logic that my eventClickOption function has, but in {...carouselItem("product_impression", product.id, product.name, product.category)}

eventClickOption = (product:any) => {
if(product.showPrice.offerPrice > 0 ){
return carouselItem( "click_product_promo", product.id, product.name, 
product.category)
} return carouselItem( "click_product", product.id, product.name, 
product.category)
}


 <div className="body">
      <IonSlides key={this.slideId} id={this.slideId} pager={false}>
        {this.props.products.map(product => ( 
          <IonSlide key={product.id} onClick={this.eventClickOption}
            {...carouselItem("product_impression", product.id, product.name, 
 product.category)} >
            <ProductCard
              key={product.id}
              product={product}
              settings={this.props.settings}
              cartModel={this.props.cartModel}
              onGoToCart={onGoToCart}
            ></ProductCard>
            
          </IonSlide>
        ))}
      </IonSlides>
    </div>

I need that if it is greater than 0, to execute

{... carouselItem ("product_impression_promo", product.id, product.name, this.props.info.title)} and if not
{... carouselItem ("product_impression", product.id, product.name, this.props.info.title)}

I tried some ways, but could not solve it as it gave me error

Answer 1

My solution was this,

  <IonSlides key={this.slideId} id={this.slideId} pager={false}>
        {this.props.products.map(product => {
        if(product && product.showPrice.offerPrice > 0) {
          carouselItem("product_impression_promo", product.id, product.name, product.category)}
        else{
          carouselItem("product_impression", product.id, product.name, product.category)
        }
          return(
          <IonSlide key={product.id} onClick ={()=>product && product.showPrice.offerPrice > 0 ? 
            carouselItem( "click_product_promo", product.id, product.name, product.category) :
              carouselItem( "click_product", product.id, product.name, product.category )}>
            <ProductCard
              key={product.id}
              product={product}
              settings={this.props.settings}
              cartModel={this.props.cartModel}
              onGoToCart={onGoToCart}
            ></ProductCard>
            
          </IonSlide>)
        })}
      </IonSlides>

I did the condition above and change the () of the map to {} so that it will take the condition and add a return, and now it works

Answer 2

you can seprate the logic you need in a function and pass it the the onClick like :

const isProductPriceExist =() => {
 if(product.showPrice.offerPrice > 0 ){
     return carouselItem( "click_product_promo", product.id, product.name, product.category)
} return carouselItem( "click_product", product.id, product.name, product.category)
         
}

it will be more easy and more readable

<IonSlide key={product.id} onClick ={isProductPriceExist} {...carouselItem("product_impression", product.id, product.name, product.category)}/>