javascript - Warning: flattenChildren(...): Encountered two children with the same key / Child keys must be unique -

yesterday added react-router-dom project , when leave , come sky element in nav, reloads sky , get

warning: flattenchildren(...): encountered 2 children same key, element-id-50. child keys must unique; when 2 children share key, first child used.

(the number 50 used above example, throws error ~40 times each time different ids)

the problem seems stem here in sky.js file:

componentwillmount() {     this.props.dispatch(requestskysetup());     this.props.dispatch(requestallelements());      this.setstate({loadedsky: true, loadedelements: true}); } 

since each time i'm going screen, component unmounting , re-mounting when come back.

when receiveskysetup finished, render function in sky.js creates bunch of divs called sectors , each sector creates few divs called slots.

then inside of slot.render have:

return connectdroptarget(             <div classname={showoutline ? 'slot showoutline' : 'slot'} style={style} onclick={interactable ? this.handleclick : null}>                 {                     elements                         .map(e => (                             <skyelement                                 id={e.id}                                 key={`element-id-${e.id}`}                                 title={e.title}                                 size={150}                                 opacity={e.opacity}                                 glow={e.glow}                                 color={e.color}                                 sectorid={e.sectorid}                                 slotid={e.id}                                 dispatch={this.props.dispatch}                                 isdragging={false}                                 transformelement={false} />                         ))                 }             </div>         ); 

the key element in skyelement call above what's throwing 40+ errors on each mounting.

happy provide more code if needed.

any hugely helpful. thanks!

edit: console logging elements

digging in bit more, items doubling in store.

so, on 2nd render of sky tab, full list of element ids ["0", "1", "2", "3", "4", "5", "6", "7", "17", "18", "19", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "77", "78", "0", "1", "2", "3", "4", "5", "6", "7", "17", "18", "19", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "77", "78"]

on 3rd render, elements 0-78 (the ids apply array above) added again array

in slot.js

const mapstatetoprops = ({elements}, ownprops) => {     return {         elements: getelementsbyslotid(elements, ownprops.id),     }; }; 

elements here n times number of loads sky has done.

in sky.js

const mapstatetoprops = ({sky, elements}) => {     return {         sectors: getsky(sky).sectors,         elements: getelementsbykeyname(elements, 'visibleelements'),         unplacedelements: getelementsbykeyname(elements, 'unplacedelements'),     }; }; 

printing elements.length see double here too. slot.js pulling same store, makes sense

in elements/reducer.js

case 'receiveallelements':         const visibleelements = {};         const unplacedelements = {};          const elements = action.elements.reduce((result, index) => {             result[`${index.id}`] = index;             return result;         }, {});          const keys = object.keys(elements);         (const key of keys) {             const e = elements[key];              if (e.sectorid === null) {                 unplacedelements[key] = e;             } else {                 visibleelements[key] = e;             }         }          const visibleids = object.keys(visibleelements);         const unplacedids = object.keys(unplacedelements);         console.log(visibleids);         console.log(unplacedids); // logging these, numbers consistent , don't double, triple etc each load          return {             ...state,             elementsmap: {                 ...state.elementsmap,                 ...elements,             },             visibleelements: [...state.visibleelements, ...visibleids],             unplacedelements: [...state.unplacedelements, ...unplacedids],         }; 

maybe in there causing count double?

the issue here was

    return {         ...state,         elementsmap: {             ...state.elementsmap,             ...elements,         },         visibleelements: [...state.visibleelements, ...visibleids],         unplacedelements: [...state.unplacedelements, ...unplacedids],     }; 

namely, visibleelements (and unplacedelements values).

[...state.visibleelements, ...visibleids] concat 2 arrays since code being hit each time went sky tab, adding new ids in ...visibleids, array had in ...state.visibleelements , doubling values