0

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;
  • Does this answer your question? [How can I use multiple refs for an array of elements with hooks?](https://stackoverflow.com/questions/54633690/how-can-i-use-multiple-refs-for-an-array-of-elements-with-hooks) – Matias Kinnunen Dec 14 '20 at 22:07
  • I did attempt this solution, however each element in the array keeps getting set to null. Any suggestions? – Andy Steven Llactahuamani Dec 15 '20 at 06:43

0 Answers0