How to print array data using map method in React JS?

Question

Hello Community I am stuck at some point I am new at React JS. I want to call image file using map function. Only images not appear on the webpage.

Here is my Array.jsx file

const PhotoData = [
   
        {
            imgsrc: gallery_1
        },
        {
            imgsrc: gallery_4
        },
        {
            imgsrc: gallery_7
        },
        {
            imgsrc: gallery_10
        }
    ]

    const PhotoData1 = [
   
        {
            imgsrc: gallery_2
        },
        {
            imgsrc: gallery_6
        },
        {
            imgsrc: gallery_8
        },
        {
            imgsrc: gallery_12
        }
    ]

    const PhotoData2 = [
   
        {
            imgsrc: gallery_3
        },
        {
            imgsrc: gallery_5
        },
        {
            imgsrc: gallery_9
        },
        {
            imgsrc: gallery_11
        }
    ]

    export default [PhotoData,PhotoData1,PhotoData2];

also import the gallery images on above the code.

Here is my photos.jsx file where I write the code.

<div className='photo__header-grid'>
                <div className='grid-item'>
                    {
                        PhotoData.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>
                                    <img src={val.imgsrc} alt="gallery_1"/>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className='photo__header-grid-1'>
                <div className='grid-item'>
                {
                        PhotoData1.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>
                                    <img src={val.imgsrc} alt="gallery_1"/>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className='photo__header-grid-2'>
                <div className='grid-item'> 

                    {
                        PhotoData2.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>
                                    <img src={val.imgsrc} alt="gallery_1"/>
                                </div>
                                )
                            })
                    }
                </div>
            </div>

Images not appear on the web-page. Thanks in advance.

If you manually add a single `img` tag with a single src from your data-set, does it work? — Will Jenkins, Feb 04 '22 at 10:58
Your image path as `src` will be `gallery_12` for example. It is not a path to render images in the browser. You should use meaningful paths for browsers like `/gallery_12.jpg`, or `images/gallery_12.png` or etc. Got the point? — Emre Doğan, Feb 04 '22 at 11:01
Thanks for everyone to answer this question. Now problem is solved by some changes in my array file photos.jsx file. — Bhavik Sejpal, Feb 04 '22 at 11:17

score 0 · Answer 1 · answered Feb 04 '22 at 11:43

0

I don't understand if the images are local or by a link, but if they are local, try using src={require(val.imgsrc)}, as said here

answered Feb 04 '22 at 11:43

Gabriel Guimarães

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 04 '22 at 13:10

score 0 · Answer 2 · answered May 23 '22 at 11:27

Add this to Array.jsx file

const PhotoData = [
  {
    imgsrc: gallery_1
  },
  {
    imgsrc: gallery_4
  },
  {
    imgsrc: gallery_7
  },
  {
    imgsrc: gallery_10
  }
];

const PhotoData1 = [
  {
    imgsrc: gallery_2
  },
  {
    imgsrc: gallery_6
  },
  {
    imgsrc: gallery_8
  },
  {
    imgsrc: gallery_12
  }
];

const PhotoData2 = [
  {
    imgsrc: gallery_3
  },
  {
    imgsrc: gallery_5
  },
  {
    imgsrc: gallery_9
  },
  {
    imgsrc: gallery_11
  }
];

export default { PhotoData, PhotoData1, PhotoData2 };

Then import it to photos.jsx file

import { FC } from 'react';

import { PhotoData, PhotoData1, PhotoData2 } from './Array.jsx'; // location of the array.jsx file

const Photos: FC = () => {
  return (
    <>
      <div className="photo__header-grid">
        <div className="grid-item">
          {PhotoData.map((val, index) => {
            return (
              <div className="gallery-item" key="{index}">
                <img src={val.imgsrc} alt="gallery_1" />
              </div>
            );
          })}
        </div>
      </div>

      <div className="photo__header-grid-1">
        <div className="grid-item">
          {PhotoData1.map((val, index) => {
            return (
              <div className="gallery-item" key="{index}">
                <img src={val.imgsrc} alt="gallery_1" />
              </div>
            );
          })}
        </div>
      </div>

      <div className="photo__header-grid-2">
        <div className="grid-item">
          {PhotoData2.map((val, index) => {
            return (
              <div className="gallery-item" key="{index}">
                <img src={val.imgsrc} alt="gallery_1" />
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

export default Photos;

How to print array data using map method in React JS?

2 Answers2