Getting either " key is not a prop" or Each child in a list should have a unique "key" prop.

[florianbepunkt]

I'm confused.

In my template I'm rendering a list like this:

        <PrimaryParagraph>
          <strong>Rechnungsadresse:</strong>
          <br />
          {addressFormatter
            .formatAsList(order.billingDetails, order.customerType, order.language)
            .map((line, ix) => (
              <span key={`line-${ix}`}>
                {line}
                <br />
              </span>
            ))}
        </PrimaryParagraph>

However this gives me the error "key is not a prop" in production, while omitting it gives me the error "Each child in a list should have a unique "key" prop". I think the above is valid React code.

Any ideas how to solve this?

[shellscape]

That warning can be safely ignored. (we even have code to disable logging that, which is weird you're seeing it.) keys are only important with reactive models, and since email isn't reactive, keys aren't needed

[florianbepunkt]

Hm, I'm running a lambda function which calls the render method const emailHtml = await render(template(props)); and this lambda logs this as an error, which triggers our log error filter.

[shellscape]

probably worth opening a bug issue with a reproduction so we can nuke the message for your case. I'll get that in today for you if you can get that issue opened

[florianbepunkt]

Understood, but quite complex to create a self-containing reproduction repo. Can you point me, where you disable that warning in your code?

[shellscape]

No need for a repo. Our issue template has a link to a stackblitz template. I'm mobile until later today, but a quick search of the repo should turn up the exact spot

[florianbepunkt]

Did exactly that, but nothing came up, hence the question. I'm fairly certain this has something to do with our lambda setup – what usually is a warning in react, is logged as an error in our case. So if you can link where you suppress the warning I can triage and report back.

[shellscape]

OK so it's not in the jsx-email package, but rather the preview app:

jsx-email/apps/preview/app/src/main.tsx

Line 23 in afd9ca8

/^Warning: Each child in an array or iterator should have a unique "key" prop|^Warning: Each child in a list should have a unique "key" prop/;

that's where the original source of the complaint came from. You'll probably want to add something similar for your lambda.

Alternatively, if you can identify which portions of the jsx-email components need keys, I can try and get something added into the release/v2 branch.