CODEWITHSUNDEEP
reactjs
SkRoR
SkRoR

Reputation: 1199

TypeError: pictures.forEach is not a function

I am trying to display image slider on click.(slider working but pictures are not able to see in it) Onclick of an image I am calling atoggleLightBoxView function.
but getting this error

TypeError: pictures.forEach is not a function
toggleLightBoxView
src/Components/PreviewReport.js:145
  142 | const picContent =[];
  143 | const toggleLightBoxView = (pictures,pindex) =>{
  144 |   console.log(pictures)
> 145 |    pictures.forEach(ele => {
      | ^  146 |           if(ele.includes('.')) {
  147 |               picContent.push({
  148 |                   url: url+'/'+ele,

and I am unable to pictures in slider on click. Kindly help to fix this error.

Here is my function that I call image onClick

      import React, { useState, useEffect } from "react";
        import ReactImageVideoLightbox from 'react-image-video-lightbox';
        const PreviewReport = (props) => {
        const [showLoader, setShowLoader] = useState(true);
        const [lightBoxMedia, setLightBoxMedia] = useState([]);
        const [mediaImages, setmediaImages] = useState([]);
        const [showLightBox, setShowLightBox] = useState(false);
        const [currIndx, setCurrentIndx] = useState(0);
        const [mediaImages, setmediaImages] = useState([]);
        
        
       const picContent =[];
      const toggleLightBoxView = (pictures,pindex) =>{
console.log(pictures)#result displayed below
         pictures.forEach(ele => {
                if(ele.includes('.')) {
                    picContent.push({
                        url: url+'/'+ele,
                        type: 'photo',
                        altTag: 'House  details - '+ele
                    });
                } else {
                    picContent.push({
                        url: `https://player.vimeo.com/video/${ele}`,
                        type: 'video',
                        title: ' Details Video'
                    })
                }
            })
        
        console.log("pictures_with_url",picContent)
        setmediaImages(picContent)
        console.log("pindex",pindex)
        setCurrentIndx(pindex);
        setShowLightBox(!showLightBox);
    }
        
        return (
        <>
        {showLoader ? <Preloader flag={!showLoader} /> : ""}
        { showLightBox ?  
        <div style={{ width: "100%", height: "100%", position: "fixed", zIndex: "9" }}>
        <ReactImageVideoLightbox data={mediaImages} startIndex={currIndx} showResourceCount={true} onCloseCallback={() => toggleLightBoxView(currIndx)} />
        </div>
        : ""} 
        
        {previewItemList.map((result,index) => {
        return (
          <div key={index} data-index={index}>
            {result.pictures.length > 0
            ? result.pictures.map(
              (pictures, pindex) => {
              return (
                  <div
                  key={pindex}
                  className="preview-image"
                  >
                  <img
                  src={`${url}/${pictures}`}
                  alt={pictures}
                  onClick={() => toggleLightBoxView(result.pictures,pindex)}
                  />
                  </div>
              );
              }
            )
            : ""}
        );
        };
        
        export default PreviewReport;

Console result for pictures and pictures with url array.

pictures = [
    "IMG_0856.JPG",
    "IMG_0831.JPG",
    "IMG_0848.JPG"
]


pictures_with_url =[
{
    "url": "http://localhost:3000/reports/0413/YvQ0F5h6M80vWWWkewu3mPRb/juTxhlvBsTMaXPPcJmlq/IMG_0856.JPG",
    "type": "photo",
    "altTag": "House details - IMG_0856.JPG"
},
{
    "url": "http://localhost:3000/reports/0413/YvQ0F5h6M80vWWWkewu3mPRb/juTxhlvBsTMaXPPcJmlq/IMG_0831.JPG",
    "type": "photo",
    "altTag": "House details - IMG_0831.JPG"
},
{
    "url": "http://localhost:3000/reports/0413/YvQ0F5h6M80vWWWkewu3mPRb/juTxhlvBsTMaXPPcJmlq/IMG_0848.JPG",
    "type": "photo",
    "altTag": "House details - IMG_0848.JPG"
}

]

Upvotes: 0

Views: 284

Answers (2)

Mayur Vaghasiya
Mayur Vaghasiya

Reputation: 1482

In mediaImages array look like this !

mediaImages={[
    {
      url: "https://placekitten.com/450/300",
      type: "photo",
      altTag: "some image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some video",
    },
    {
      url: "https://placekitten.com/550/500",
      type: "photo",
      altTag: "some other image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some other video",
    },
  ]}

currently you push only image url !

For more help Click here

Upvotes: 1

mohamad_sdg
mohamad_sdg

Reputation: 91

if you are using typescript. when you are defined type for toggleLightBoxView arguments is still having trouble ?

Upvotes: 1

Related Questions