In my Photos/Main component I am mapping through an object, which is from my state called filteredImages, containing instances of image data that's being retrieved from a database. For each instance I am dynamically generating a React component 'ImageItem' which will display an image to the DOM. What I need to do is to store the DOM elements that are generated by the 'ImageItem' Component in the Main Component. I've come across being able to use Reacts' ref, and useRef and forwardRef Hooks but I'd like to know how store these refs in a array. Any help would greatly be appreciated!!!
Photos.js
const Photos = ({ photos: { albums, images, filteredImages, loadingAlbums, loadingImages, currentAlbum }, getAlbums, getImages }) => {
const imageElement = useRef(null);
// When photos page is initially loaded
useEffect(() => {
getAlbums();
getImages();
// eslint-disable-next-line
}, []);
// When filteredImages is changed
useEffect(() => {
if (filteredImages !== null) {
console.log(imageElement.current);
}
}, [filteredImages]);
return (
<Masonry breakpointCols={breakpointColumnsObj} className="my-masonry-grid mx-5" columnClassName="my-masonry-grid_column">
{ filteredImages.map(image => <ImageItem ref={imageElement} image={image} key={image._id} />)}
</Masonry>
</div>
);
};
// imports from our state and brings it into the component as a prop
const mapStateToProps = state => ({
photos: state.photos
});
export default connect(mapStateToProps, { getAlbums, getImages })(Photos);
ImageItem.js
const ImageItem = ({image}, ref) => {
return (
<div ref={ref} className="grid-item my-1">
<a href="" className='grid-link'>
<img className='grid-img' src={image.fileLocation} alt=""/>
</a>
</div>
)
}
]
const forwardedImageElement = React.forwardRef(ImageItem)
export default forwardedImageElement;