How to specify your key for photo blocks #110

GreenEyeInvestor · 2023-04-22T14:35:09Z

GreenEyeInvestor
Apr 22, 2023

I have a problem with duplicate keys. As I understand it, the keys for the cells are formed from the src tag, this is all clear and correct, but I have content loading and sometimes there is a duplicate photo in the uploaded content, which leads to errors in the console

Warning: Encountered two children with the same key, image.jpeg. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

renderColumnContainer={({ columnContainerProps, children }) => (
                <div className={styles.photos__column}>{children}</div>
            )}
            renderContainer={({ containerProps, containerRef, children }: RenderContainerProps) => (
                <div ref={containerRef} className={styles.photos}>
                    {children}
                </div>
            )}
            renderPhoto={({ photo, wrapperStyle, renderDefaultPhoto }: any) => {
                return (
                    <ViewPhoto medium={photo} />
                )
            }}

Component ViewPhoto

<div key={v4()}>
            <article className={`${styles.photoItem} ${styles.photoItemOverlay}`}  data-photo-modal-medium-id={medium._id}>
                <ImageComponent medium={medium} />
            </article>
        </div>