Drying up/refactoring a component nin ReactJs

Question

I have this long-winded component which is passing many props. Is there a dryer way of passing this component to child?

Thanks.

let products;
if (!this.state.loading) {
  products = this.state.products.map(product => (
    <Product
      description={product.description}
      title={product.title}
      originalRetailPrice={product.original_retail_price.formatted_value}
      retailPrice={product.retail_price.formatted_value}
      priceValue={product.retail_price.value}
      discounted={product.discount}
      imageURL={product.cover_image_url}
      key={product.uuid}
      uuid={product.uuid}
      onClick={this.addToBagHandler}
    />
  ));
}

These are properties returned from an api call.

You could parse the the data when it's returned and consolidate it into a single object called product or something similar. Looks like you're already getting an object like that. — Chris B.
– Chris B., Commented Dec 4, 2019 at 14:50

Ertan Hasani · Accepted Answer · 2019-12-04 14:50:51Z

2

You just pass the whole product instead

let products;
if (!this.state.loading) {
  products = this.state.products.map(product => (
    <Product
      product={product}
      onClick={this.addToBagHandler}
    />
  ));
}

And inside Product you can access them like this:

const { description, title, discount } = this.props.product

answered Dec 4, 2019 at 14:50

Ertan Hasani

1,78316 silver badges27 bronze badges

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

Comments

akhtarvahid · Accepted Answer · 2019-12-04 14:53:41Z

0

You can destructure like this

   let products;

   if (!this.state.loading) {
    products = this.state.products.map(({
    description,title, original_retail_price,
    retail_price, retail_price,discount,cover_image_url,
    uuid}) => 
    <Product 
    description={description}
    title={title}
    originalRetailPrice={original_retail_price.formatted_value}
    retailPrice={retail_price.formatted_value}
    priceValue={retail_price.value}
    discounted={discount} 
    imageURL={cover_image_url}
    key={uuid}
    uuid={uuid}
    onClick={this.addToBagHandler}/>
  )}

answered Dec 4, 2019 at 14:53

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

Drying up/refactoring a component nin ReactJs

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