Frontend developer focused on inclusive design

Unique "key" prop issue in React

While working on a component, which is responsible for outputting content from Notion, I got the following error:

Warning: Each child in a list should have a unique "key" prop.

At first, this error message got me confused.

The thing is that noticed this message after working on a functionality to output lists from Notion. By list, I mean <ul> and <ol>.

So, I went back to my component and added key with a unique value to <li> elements. However, it did not solve the problem.

Then I noticed that this error happens only when I use a loop. In my case, it is the map() method.

Since the list functionality, that I worked on, also included a component which used a loop, I realized that this error could be related to all child elements outputed during a loop, even if the child element is not <li>.

After adding key with a unique value to all child element returned in a loop, the issue was gone.

So, the word list got me confused the most in that error message. I thought that this issue was only related to the list elements, such as <ul> and <ol>.

Also, working on the list functionality for my component contributed to the confusion.