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,

Answer 1

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} />); 
});

Answer 2

forEach方法可以工作，因为可以在一次迭代中将两个元素推送到rows中，这在使用map()返回时是不可能的，因为在一次迭代中只能返回一个要推送的元素。