Add additional props to component in a foreach loop

February 8, 2022

i have a component in React that receives some elements (photos), i have a object with this composition:

getItems() {
    const { gallery } = this.props;
    const { content_elements: contentElements } = gallery;
    const items = [];

    if (contentElements) {
      contentElements.forEach((photo, index) => {
        let item = (
          <div key={photo.id} className="gal__fig-item">
            <Image
              srcset="gallery"
              figureClassName="mm"
              imgClassName="mm__img"
              noZoom={true}
              showCaption={false}
              wrapperClassName="mm__wr"
              {...photo}/>
          </div>
        );           

        items.push(item);
      });
    }

    return items;
  }

I need to add a prop in the image component, but only in the first element (index = 0).

I do this:

getItems() {
    const { gallery } = this.props;
    const { content_elements: contentElements } = gallery;
    const items = [];

    if (contentElements) {
      contentElements.forEach((photo, index) => {
        let item = (
          <div key={photo.id} className="gal__fig-item">
            <Image
              srcset="gallery"
              figureClassName="mm"
              imgClassName="mm__img"
              noZoom={true}
              showCaption={false}
              wrapperClassName="mm__wr"
              {...photo}/>
          </div>
        );
        if(index === 0){
           item = (
            <div key={photo.id} className="gal__fig-item">
              <Image
                srcset="gallery"
                figureClassName="mm"
                imgClassName="mm__img"
                noZoom={true}
                showCaption={false}
                hasLazyLoad={false}
                wrapperClassName="mm__wr"
                {...photo}/>
            </div>
          );
        }

        items.push(item);
      });
    }

    return items;
  }

That works, but….maybe there is an other option, more clean code, to do it?
Someone can help me? Thanks

>Solution :

I suggest this :

if index was zero then hasLazyload will be false and vise versa

getItems() {
        const { gallery } = this.props;
        const { content_elements: contentElements } = gallery;
        const items = [];
    
        if (contentElements) {
          contentElements.forEach((photo, index) => {
            let item = (
              <div key={photo.id} className="gal__fig-item">
                <Image
                  srcset="gallery"
                  figureClassName="mm"
                  imgClassName="mm__img"
                  noZoom={true}
                  showCaption={false}
                  hasLazyLoad = {index !== 0}  
                  wrapperClassName="mm__wr"
                  {...photo}/>
              </div>
            );           
    
            items.push(item);
          });
        }
    
        return items;
      }