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.