Beginnerprogrammer Beginnerprogrammer - 19 days ago 5
Javascript Question

How to skip first in map function

I want to skip the first in the

.map
function what I do now is this:

return (
<div className="gallery clearfix">
<div className="gallery-image">
<img src={block.gallery[0].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[0].images.thumbnail_md} 1x, ${block.gallery[0].images.thumbnail_lg} 2x`} className="img-fluid" />
</div>
<div className="gallery-thumbs">
<div className="row">
{ block.gallery.slice(1).forEach((item, i) => (
<div className="gallery-item" key={i}>
{ block.gallery.length > 4 ?
<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="" />
}
</div>
))}
</div>
</div>
</div>
);


as you see I show the first pic in the first
img
tag but it will also show in the
.map
function as first so I got duplicated images. How do I skip the first image in the
.map
function?

Answer

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