[MultiSelect issue] Encountered two children with the same key

[DragomirAndrei19]

I'm facing the same issue described here If you serve this data array, for example, to the MultiSelect component you'll receive Warning: Encountered two children with the same key, GenericName`. 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.

const myJ = [
  {Name: "GenericName", Id: 1},
  {Name: "GenericName", Id: 2}
]

<MultiSelect 
data={myJ]  
labelField="Name" 
valueField="Id"
renderSelectedItem={(item, unSelect) => (
          <TouchableOpacity onPress={() => unSelect && unSelect(item)}>
            <View style={styles.selectedStyle}>
              <Text style={styles.textSelectedStyle}>{item.Name}</Text>
              <Image style={{width: 20, height: 20, tintColor: "white"}} source={IMAGES.xCircle}/>
            </View>
          </TouchableOpacity>
        )}
/>

So I believe @TommysG is right. Shouldn't the Id field be used?

[DragomirAndrei19]

Is there still no workaround around this issue? The fact that you cannot multi select two items with the same despite them having different IDs is quite inconvenient.

[TommysG]

Is there still no workaround around this issue? The fact that you cannot multi select two items with the same despite them having different IDs is quite inconvenient.

@DragomirAndrei19 We ripped off all dropdown elements from our app and replace them with bottom sheets for better UX. To address this issue, navigate to the 'node_modules' directory, locate the library, and replace the 'key' with 'value' instead of 'label'. Then, patch this version. This is the approach we took until we completely replaced the library. Hope this helps.

[DragomirAndrei19]

Is there still no workaround around this issue? The fact that you cannot multi select two items with the same despite them having different IDs is quite inconvenient.

@DragomirAndrei19 We ripped off all dropdown elements from our app and replace them with bottom sheets for better UX. To address this issue, navigate to the 'node_modules' directory, locate the library, and replace the 'key' with 'value' instead of 'label'. Then, patch this version. This is the approach we took until we completely replaced the library. Hope this helps.

Thank you, I'll try that.

Right now, the approach I am using is to concatenate 'Name' with the id and an arbitrary string and then deleting everything after it when it's displayed using renderSelectedItem & renderItem. But it is not ideal.