React array.map()

Question

I will use this example http://codepen.io/lacker/pen/vXpAgj , since it's very similar to my current issue. So, let's say we have this array:

[
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
]

How can I rewrite the code below using array.map()?

    var rows = [];
    var lastCategory = null;
    this.props.products.forEach(function(product) {
      if (product.category !== lastCategory) {
        rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
      }
      rows.push(<ProductRow product={product} key={product.name} />);
      lastCategory = product.category;
    });

The sample below doesn't do the job properly.

const lastCategory = null;
const rows = this.props.products.map(function(product){     
  if (product.category !== lastCategory) {        
    return (<ProductCategoryRow category={product.category} key={product.category} />); 
  }     
 return (<ProductRow product={product} key={product.name} />); 
 lastCategory = product.category;      
});

Cheers and thank you,

you're never going to reach the lastCategory = product.category line due to the return above it — larz
– larz, Commented Mar 16, 2017 at 19:37

larz · Accepted Answer · 2017-03-16 19:52:38Z

2

You'll never be setting the lastCategory because you're always returning before that line. Try moving it up into your block that will be ran if the category is different from the last category.

Additionally, like another answer stated, you need to return the category row in addition to the product row when you encounter a new category.

var lastCategory = null;
const rows = this.props.products.map(function(product){     
  if (product.category !== lastCategory) {
    lastCategory = product.category;
    return (<ProductCategoryRow category={product.category} key={product.category} />
            <ProductRow product={product} key={product.name} />); 
  }     
  return (<ProductRow product={product} key={product.name} />); 
});

edited Mar 16, 2017 at 19:52

answered Mar 16, 2017 at 19:44

larz

5,7662 gold badges13 silver badges23 bronze badges

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

6 Comments

DinoMyte Over a year ago

Along with that, you also might wanna set 'lastCategory' as var instead of 'const' since you can't change a const after its value is set.

larz Over a year ago

Good call! Wasn't even looking at that. Thanks - updated :)

MrCode Over a year ago

This still won't work - using this loop it requires the ability to push a category row followed by a product row in a single iteration. Here, you are pushing a category and will never push the following product because you have returned.

larz Over a year ago

Noticed that thanks to another answer. Have updated

MrCode Over a year ago

Still won't work because you must return an individual or parent element not a pair of siblings like that.

|

MrCode · Accepted Answer · 2017-03-16 19:51:07Z

1

The forEach method works because it is possible to push two elements onto rows in a single iteration, where is that is not possible when returning with map() because you can only return one element to be pushed during a single iteration.

answered Mar 16, 2017 at 19:51

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Collectives™ on Stack Overflow

React array.map()

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related