How to skip first in map function

Question

I want to skip the first in the .map function what I do now is this:

block.gallery.map((item, i) => (
       <div className="gallery-item" key={i}>
        { block.gallery.length > 4 && i !== 0 ?
          <div className="inner">
             <img src={block.gallery[i].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[i].images.thumbnail_md} 1x, ${block.gallery[i].images.thumbnail_lg} 2x`} className="img-fluid" title="" />
             <div className="img-overlay">
               <span className="img-overlay-body">{ block.gallery.length - 4 }+ <span className="hidden-xs">Foto's</span></span>
             </div>
           </div>
           :
           <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" />
          }

Why you are using map here as you are not returning anything. To loop the array you can use forEach and to skip the first item you can check if (i > 0) — Aruna
– Aruna, Commented Nov 18, 2016 at 14:37
@Aruna the thing being returned is the <div className="gallery-item"> and everything it contains. — Tom Fenech
– Tom Fenech, Commented Nov 18, 2016 at 14:44
It would help to update your question given that your code no longer uses .map — Pineda
– Pineda, Commented Nov 18, 2016 at 14:45

epascarello · Accepted Answer · 2016-11-18 14:48:37Z

79

So slice it to skip the first

block.gallery.slice(1).map(...)

You also need to reference the item passed into map, not using the index with the orginal array.

block.gallery[i].images.thumbnail_sm

should be

item.images.thumbnail_sm

edited Nov 18, 2016 at 14:48

answered Nov 18, 2016 at 14:36

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

5 Comments

epascarello Over a year ago

Why would it show the first picture when you skip the first index with slice? You also would need to get rid of the i==0 check inside.

epascarello Over a year ago

You still get the first one because you are not referencing the array in the map

Sireini Over a year ago

And now every item in .map function get the span with x+ photos but how do I set this to only the last one? maybe you also could help me out on that one

epascarello Over a year ago

Check to see if it is the last one? ((item, i, arr)=> and if(arr.length-1===i)

Sireini Over a year ago

around the span element?

darcher · Accepted Answer · 2018-11-15 11:35:32Z

3

You can also remove the first element, and retrieve it at any point, using Array.prototype.shift(); however, this modifies the original array.

const head = block.gallery.shift(); // removes and stores first element in "head"

console.log(block.gallery) // array with first element removed

answered Nov 15, 2018 at 11:35

darcher

3,1343 gold badges27 silver badges32 bronze badges

1 Comment

Akaisteph7 Over a year ago

This is the way to do it if you want to keep track of what was removed and not create a new array.

Collectives™ on Stack Overflow

How to skip first in map function

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related