React Component Function with Each child in a list should have a unique "key" prop. Check the render method

Question

Okay. So here is the deal. Without this component - everything was fine in my project. While with it, it points out this warning.

Warning: Each child in a list should have a unique "key" prop. Check the render method

I am currently using it in only one place in my project. And if I will comment it out, the problem will vanish. So for sure there is something wrong with it.

Here is the component code. Just a simple timer.

https://pastebin.com/dj2jy7wi

The problem with it and why I am here. It's because I cannot understand why it makes this error.

For convinience I will post the place where I am using it. So you will see, that I am not iterating through it.

<WaitTimer startDate={visitNext.ehrAppointment?.start_datetime_ltz.getTime()}/> This is it!

  return (
<Card className={className}>
  <div>
    <div className="font-bold text-xs">Next Patient:</div>
    {visitNext ?
      <div>
        <CardHeading>{visitNext.ehrPatient?.name}</CardHeading>
        <WaitTimer startDate={visitNext.ehrAppointment?.start_datetime_ltz.getTime()}/>
        <ul className="pl-5">
          <Field label="Reason for Visit" value={visitNext.ehrAppointment.reason} />
          <Field label="Gender" value={visitNext.ehrPatient?.gender} />
          <Field label="Language" value={visitNext.ehrPatient?.language} />
          <Field label="Translator" value={visitNeedTranslator} />
          <Field label="Preexisting Conditions" value={(visitNext.ehrPatient && visitNext.ehrPatient.conditions) ? visitNext.ehrPatient.conditions.join(',') : ''}/>
          <Field label="Current Medications" value={(visitNext.ehrPatient && visitNext.ehrPatient.medications) ? visitNext.ehrPatient.medications.join(',') : ''}/>
          {visitNext.ehrAppointment.references.length > 0 ? (
            <li>
              <label className="text-bold">Attached Files:</label>
              {visitNext.ehrAppointment.references.map((e, i) => (
                <a
                  key={i}
                  className="flex rounded-lg my-3 border border-link py-3 px-4 text-link text-xs items-center cursor-pointer"
                  href={"http://localhost:3000/" + e}
                  target="_blank"
                  rel="noreferrer"
                >
                  <span className="flex-grow underline">{e.replace(/^.*[\\\/]/, '')}</span>
                  <Icon name="file_download" outline />
                </a>
              ))}
            </li>
          ) : (
            <Field label="Attached Files" value="None" />
          )}
        </ul>
        <div className="mt-5 text-center">
          <Button as="button" onClick={startVisit}>
            Start Visit
          </Button>
        </div>
      </div> :
      <LoadingSpinner/>
    }
  </div>
</Card>

);

This upper piece of code is flowing directly intro index.tsx Here. As NextPatientCard

 return (
<Layout>
  <div className="grid gap-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1" >
    <div>
      <NextPatientCard className="my-2" visitNext={visitNext}/>
      <InviteCard />
    </div>
    <div>
      <PatientQueueCard className="my-2" onDemandQueue={onDemandQueue} visitQueue={visitQueue} isNewVisit={isNewVisit} setIsNewVisit={setIsNewVisit}/>
      <ContentManagementCard className="my-2" contentAssigned={contentAssigned} contentAvailable={contentAvailable}/>
      <SurveyResultsCard className="my-2"/>
    </div>
    <div className="order-first lg:order-last">
      <AudioVideoCard />
    </div>
  </div>
</Layout>

);

My question is the following. Why I am reciving this error and how to fix it in this case ?

I've tried nearly everything. Putting key property on the outside div's. Passing data to my function with an WaitTimerProps interface and ect..

Nothing is working. And the best and most curious part is the following.. As you can see on the outer render where I am using my <WaitTimer startDate={visitNext.ehrAppointment?.start_datetime_ltz.getTime()}/>

We have another custom component. Just on the upper lane

<CardHeading>{visitNext.ehrPatient?.name}</CardHeading>

If it was working before with it and without any errors (thus it is passing data to it) And they are even in the same place in the project. So it is made in a way, to not have this warning, right ?

Here is it's code:

export interface CardHeadingProps {
  children: React.ReactNode;
}
export const CardHeading = ({ children }: CardHeadingProps) => {
  return (
    <h1 className="text-2xl text-primary whitespace-pre-wrap">{children}</h1>
  );
};

Really simple huh ?

I've converted my WaitTimer to this similar signature and props interface. And it was even working as before. But still... with this warning :(

I don't know what to do and try next. Maybe the problem lies here in the render function of my WaitTimer

  return (
      <div className="font-bold text-light text-xs">
        <div>
          {textLabel} {timerComponents}
        </div>
      </div>
  );

I've also tried to put key on these div's. But it was pointless as always.

What is really wrong with it and with React itself ? And why I am having this warning ONLY with my component!

Could anyone point me to the right direction, please ?

Answer 1

I believe you problem lies in the component

in this code block you are building up a your time left object, using a forEach, just append a key to the first span to solve the warning.

  Object.keys(timeLeft).forEach((interval) => {
    // adding 00 to null values
    if (!timeLeft[interval]) {
      timerComponents.push(
          <span>{"00"}</span>
      );
    }
    // adding 0 to less than 10 values
     else if(timeLeft[interval] < 10){
      timerComponents.push(
          <span>{'0'}{timeLeft[interval]}</span>
      );
    }
     // adding other values
    else {
      timerComponents.push(
          <span>{timeLeft[interval]}</span>
      );
    }
    // adding colon
      timerComponents.push(
          <span>{":"}</span>
      );
  });

<span key={index}>{"00"}</span>