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.
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;