forEach over es6 Map in JSX

Question

I had a javascript array that was rendering components using array.map. I switched this array to an es6 Map in order to be able to use key-value pairs

Answer 1

You are correct, forEach doesn't return anything, use map instead, it will return an array of JSX components.

Map will allow you to access the key as well: resultsByGuid.map((item, key) => { })

Edit I apologize for jumping the gun and not reading that you were using a Map data structure. forEach won't render anything because you need the return value, you could implement your own Array.map like iterator:

const mapIterator = (map, cb) => {
  const agg = [];
  for(let [key, value] of map) {
    agg.push(cb(value, key));
  }
  return agg;
};


  {mapIterator(resultsByGuid, (result, index) => {
    key++;
    return this.renderGalleryItem(result, key);
  })}

Edit 2 And thanks to @zerkms for pointing out what should've been obvious to me:

  {Array.from(resultsByGuid.values()).map((result, index) => {
    key++;
    return this.renderGalleryItem(result, key);
  })}