Menu Items have not got unique keys

[Prince-Jonathan]

In my console, I keep getting this warning:

Warning: Encountered two children with the same key, Others. 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

I believe this feature enables react to efficiently update the DOM. My only concern is if something is being done about it. Or better asked: what can I do to resolve this?

[mmeesit]

If you look into the project the renderItem function in index.js is incorrect: since the key and value are identical values, it will always show the errors. I modified the code like this:

      <div
        key={`${item.value}_${level}`}
        className={`item item-level-${level} ${item.active ? 'active' : ''}`}>

and for the render children part like this:

        <div key={`${item.value}-children-level-${level}`} className={`children ${item.active ? 'active' : 'inactive'}`}>
          {item.children && item.children.map((child) =>
            this.renderItem(child, level + 1)
          )}
        </div>

and divider:

        <div key={`${item.value}-divider_${level}`} className={`divider divider-level-${level}`}>
          { item.label }
        </div>