img-mapper/react-img-mapper

Getting Continuous Key Error after upgrading from v0.2 to v0.4

Closed this issue · 2 comments

jaspreet-singh37349 commented

Describe the bug

I am getting continuous key uniqueness error from your module

To Reproduce

  1. passing map area causing the error

Error Stack

Encountered two children with the same key, 03. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Expected behavior

Not getting error

Screenshots

image

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Version: 86

JSON

[
  {
    "id": "<AutoIncrementValue>",
    "title": "title",
    "shape": "poly",
    "name": "name",
    "fillColor": "skyblue",
    "strokeColor": "black",
    "coords": [<MyCoords>]
  },
  ....
]
NishargShah commented

The problem is in your id, your id is not unique and as docs said id must be unique but you can change that behavior by changing the key name

areaKeyName: '<uniqueId>'

so add unique key name in your JSON and your error will go, else you can specify any name on it such as areaKeyName: 'index' so it will take index of the array as your key.

[
  {
    "id": "<AutoIncrementValue>",
    "<uniqueKey>": "<unique>",
    "title": "title",
    "shape": "poly",
    "name": "name",
    "fillColor": "skyblue",
    "strokeColor": "black",
    "coords": [<MyCoords>]
  },
  ....
]
jaspreet-singh37349 commented

Thanks, The issue is fixed now.

  • 🎉1