1

I am currently get this duplicated key warning "Warning: Encountered two children with the same key". However, I am unsure where this duplication of key comes from. I am using the fileData id as my key which should be unique as it is firebase generated id. Therefore, I am not so sure what is happening behind here.

Here are my codes below and the warning I get.

MultimediaDetails.js

import React, { useEffect, useState } from "react";
import * as AiIcons from "react-icons/ai";
import * as FaIcons from "react-icons/fa";
import { database } from "../../../firebase";
import ViewImageFileModal from "../../modals/multimediaModals/view/ViewImageFileModal";

/**
 * It's a component that displays audio, video, and image files
 * @param props - The props object that is passed to the component.
 * @returns The MultimediaDetails component is being returned.
 */
const MultimediaDetails = (props) => {
    /* Destructuring the props object. */
    const { pId } = props;

    /* Setting the state of the component. */
    const [imageData, setImageData] = useState([]);
    const [imageMessage, setImageMessage] = useState(true);
    const userType = JSON.parse(localStorage.getItem("admin") ?? false);

    // Modal Variables
    const [showViewImageModal, setShowViewImageModal] = useState(false);
    const [fileData, setFileData] = useState(Object);

    /**
     * When the user clicks on the audio, video, or image file, the file data is set and the modal is
     * toggled.
     * @param obj
     */

    const viewImageFile = (obj) => {
        setFileData(obj);
        toggleViewImageModal();
    };

    /* The function to toggle modal states */
    const toggleAddImageModal = () => setShowAddImageModal((p) => !p);
    const toggleViewImageModal = () => setShowViewImageModal((p) => !p);

    useEffect(() => {
        /* Query data from database and listening for changes. */
        const imageQuery = database.portfolioRef.doc(pId).collection("images");


        const unsubscribeImage = imageQuery.onSnapshot((snapshot) => {
            if (snapshot.docs.length !== 0) {
                setImageMessage(false);
                setImageData(
                    snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
                );
            } else {
                setImageMessage(true);
            }
        });

        return () => {
            unsubscribeImage();
        };
    }, [pId]);

    return (
        <div className="multimedia-section">
            <div id="image-section">
                <div id="image-header">
                    <h6>
                        <u>Images</u>
                    </h6>
                    {userType ? (
                        <button className="addbtn" onClick={() => toggleAddImageModal()}>
                            <AiIcons.AiOutlinePlus /> Add Image File
                        </button>
                    ) : (
                        <></>
                    )}
                </div>
                <div id="image-content" className="multimedia-flex">
                    {imageMessage ? (
                        <p>There is not existing images for this portfolio.</p>
                    ) : (
                        <div>
                            {imageData.map((doc) => (
                                <button
                                    key={doc.id}
                                    className="fileBtn"
                                    onClick={() => viewImageFile(doc)}
                                >
                                    <FaIcons.FaImage /> {doc.imageName}
                                </button>
                            ))}
                        </div>
                    )}
                </div>
            </div>
            <ViewImageFileModal
                show={showViewImageModal}
                toggleModal={toggleViewImageModal}
                pId={pId}
                data={fileData}
                key={fileData.id}
            />
        </div>
    );
};

export default MultimediaDetails;

The initialised values for the Modal.

    /* Setting the initial state of the component. */
    const valueState = {
        name: '',
        description: ''
    }
    const { currentUser } = useAuth();
    const [formStateDisabled, setFormStateDisabled] = useState(true);
    const [deleteState, setDeleteState] = useState(false);
    const [message, setMessage] = useState('');
    const [imageUrl, setImageUrl] = useState("");
    const [loadForm, setLoadForm] = useState(false)
    const [view, setView] = useState(false);

    /* Destructuring the props object. */
    const { show, toggleModal } = props;
    const { handleChange, handleSubmit, values, errors, loading } =
        useForm(validateUpdate, valueState, handleUpdate);

    useEffect(() => {
        if (Object.keys(props.data).length !== 0) {
            values.name = props.data.imageName;
            values.description = props.data.imageDesc;
            setLoadForm(true);
        }
    }, [])

The warning I get (Shown Below), each time I click on the modal button to open the button, I noticed the warning actually repeats twice, and when I close it, it repeats another 2 times making it 4. I am not sure what is the cause of this, please help! Thank you!

warning

Updates of trials I only have 4 rows of data, all of which has its own unique id. Therefore I am unsure of where the duplicated key came from. However, if I remove the modal key "fileData.id" this warning would disappear. However, my component state will not reset and there will be a lot of props data issue that would surface. Where data for the previously clicked button will appear on the another button. Or the data might not appear at all.

update

FOR ADDITIONAL INFORMATION: This is the output for the map buttons sample

I don't see any duplicates, and I am not sure where the issue is. Is there something I am doing wrong to cause this error. I checked my DB there isn't any data error as well.

1
  • You have a bunch of <div> with a shared parent. Try adding a key= attribute on those.
    – Evert
    Commented Jun 28, 2022 at 4:28

4 Answers 4

1

Recommended solution

The problem is that your doc.id is repeating.

You are setting the imageData at the imageQuery.onSnapshot callback function, when you run the following code:

setImageData(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));

What you need to make sure is that doc.id is unique in this context (because you're using this value at the key attribute in your buttons).

That's the correct way to fix it.

Alternative solution

Another way to handle it (as a last resort), is using the following code, where you use the index position of the element at the key attribute:

{imageData.map((doc, index) => (
    <button
        key={index}
        className="fileBtn"
        onClick={() => viewImageFile(doc)}
    >
        <FaIcons.FaImage /> {doc.imageName}
    </button>
))}

But this is not recommended according to the React documentation:

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

Here is an in-depth explanation about why keys are necessary if you’re interested in learning more.

3
  • Hi @leonardomdr, I tried making it unique, as firebase IDs are unique. but I'm not sure what is the issue here. I believe the issue is more towards the modal key instead. I will edit the question which what I have tried for you to take a look
    – der
    Commented Jun 28, 2022 at 8:11
  • I Added a sample picture of the button output in my question. I dont see any duplicates. Not sure what the issue is
    – der
    Commented Jun 28, 2022 at 8:47
  • @der, it's hard to tell. I suggest you create a js fiddle mocking this situation, so anyone can try and test this locally as well. Also, I believe that you don't need to set key attribute in your ViewImageFileModal component. Commented Jun 28, 2022 at 15:50
0

Instead of doc.id use map item index like bellow. See if it works.

{imageData.map((index, doc) => (
   <button
      key={index}
          className="fileBtn"
            onClick={() => viewImageFile(doc)}>
                <FaIcons.FaImage /> {doc.imageName}
   </button>
))}
1
  • Hi @Ebrahim Khalil Amid, I have tried this but it doesn't work. I feel the main culprit is the key at the view modal
    – der
    Commented Jun 28, 2022 at 7:59
0

This is the culprit:

{imageData.map((doc) => (
    <button
        key={doc.id}
        className="fileBtn"
        onClick={() => viewImageFile(doc)}
    >
        <FaIcons.FaImage /> {doc.imageName}
    </button>
))}

The main issue here is that doc.id is duplicate, probably you have duplicate data in your imageData or ou have a faulty data in your database or something that generate a non-unique id.

To easily fix the issue, what you can do is use index of map.

{imageData.map((doc, index) => (
    <button
        key={index}
        className="fileBtn"
        onClick={() => viewImageFile(doc)}
    >
        <FaIcons.FaImage /> {doc.imageName}
    </button>
))}

index are always unique. but I suggest you should fix and see why you have duplicate data instead of just bypassing it with an index.

UPDATE

This is quite a hacky solution, but since I can't really pin point what's causing the issue without investigating first hand, let's make it so you don't have to pass a key on the modal.

So instead of storing the object data on the state, store the id instead:

Rename fileData to fileDataId.

 const [fileDataId, setFileDataId] = useState(0);

then store the id when clicking the button.


{imageData.map((doc) => (
    <button
        key={doc.id}
        className="fileBtn"
        onClick={() => viewImageFile(doc.id)}
    >
        <FaIcons.FaImage /> {doc.imageName}
    </button>
))}

on the Modal, you have to pass the imageData and the selected id, then remove the key:

<ViewImageFileModal
    show={showViewImageModal}
    toggleModal={toggleViewImageModal}
    pId={pId}
    list={imageData}
    selectedId={fileDataId}
/>

then inside ViewImageFileModal you can declare data as:

const data= props.list.find(image => image.id === props.selectedId);
4
  • Hi @I am L, the problem didn't occur with this being the key for the buttons. It occur only when I add "key={fileData.id}" to the view Modal. Additionally, I tried removing the Key for this view button as well and the warning still persist. Therefore, I feel the culprit to the warning is not the button but the modal key instead.
    – der
    Commented Jun 28, 2022 at 7:53
  • I tried doing key={doc.id + index}, I still get the same warning
    – der
    Commented Jun 28, 2022 at 8:35
  • @der I have updated my answer, can you check it?
    – I am L
    Commented Jun 28, 2022 at 13:34
  • 1
    Hi @IamL, I did accordingly to your update, and still came out with the same error. but I tried this and it worked! I just wrap my model with a condition if imageId exist.{imageId !== '' && <ViewImageFileModal show={showViewImageModal} toggleModal={toggleViewImageModal} imageData={imageData} selectedId={imageId} key={imageId} />}
    – der
    Commented Jun 30, 2022 at 4:05
0

I just wrap my model with a condition if imageId exist and it works already!

{imageId !== '' && 
      <ViewImageFileModal 
          show={showViewImageModal} 
          toggleModal={toggleViewImageModal} 
          imageData={imageData} 
          key={imageId} 
      />
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.