How to render <li> elements with keys?

[teauxfu]

Hey there, sorry if this is out of scope or already answered -- I was unable to find a related issue.

This seems like a simple use case so I imagine I must be missing something obvious.

My goal is to render a markdown list such that each HTML <li> element can be assigned a React key dynamically.

This works fine:

### my list

- a
- b
- c

<h3> my list </h3>
<ul>
  <li> a </li>
  <li> b </li>
  <li> c </li>
</ul>

But React complains about the missing keys.

The output I want to achieve would be this, or similar

<h3> my list </h3>
<ul>
  <li key="0"> a </li>
  <li key="1"> b </li>
  <li key="2"> c </li>
</ul>

I know I could write a component that maps some JS data into the desired result, but I would prefer not to have to keep all my list content as external data files. This seems like it would be a super common use case.

Do I have to use a custom component mapping to achieve the desired result?

[ChristianMurphy]

@teauxfu could you share a bit more context on when/where you are seeing the issue?
Trying the sample could you provided with MDX 1 https://codesandbox.io/s/mdx-list-example-kl21i
No warning about missing keys is thrown. 🤔

[teauxfu]

I encountered this while rendering some mdx content in a Gatsby.js development server.
After more testing I realized that the error is only displayed while in development mode.
I'm only rendering static content with mdx, and I can easily enough ignore that dev warning, so it's a non-issue for me.

Thanks for the help!