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.