undefined is not an object when using sectioned multi select react native - reactjs

Question

I have a piece of code that creates a sectioned multi select component based on https://github.com/renrizzolo/react-native-sectioned-multi-select.
This is my code:
import React, { useState } from 'react';
import {I18nManager,View,Text,SafeAreaView,Image,SectionList,TouchableOpacity,TextInput,ScrollView,useWindowDimensions,Linking} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';
export function SellWithUsFirstScreen3(props){
const items = [
{
name: "Fruits",
id: 0,
children: [{
name: "Apple",
id: 10,
},{
name: "Strawberry",
id: 17,
},{
name: "Pineapple",
id: 13,
},{
name: "Banana",
id: 14,
},{
name: "Watermelon",
id: 15,
},{
name: "Kiwi fruit",
id: 16,
}]
},
{
name: "Gems",
id: 1,
children: [{
name: "Quartz",
id: 20,
},{
name: "Zircon",
id: 21,
},{
name: "Sapphire",
id: 22,
},{
name: "Topaz",
id: 23,
}]
},
{
name: "Plants",
id: 2,
children: [{
name: "Mother In Law\'s Tongue",
id: 30,
},{
name: "Yucca",
id: 31,
},{
name: "Monsteria",
id: 32,
},{
name: "Palm",
id: 33,
}]
},
]
const [selectedItems,setselectedItems] = useState([]);
onSelectedItemsChange = (theitem) => {
setselectedItems(prevState => [...prevState, theitem]);
}
console.log(selectedItems);
/////////
return (
<SafeAreaView style={{flex:1,backgroundColor:'white'}}>
<View style={styles.container}>
<View>
<SectionedMultiSelect
items={items}
uniqueKey='id'
subKey='children'
selectToggleIconComponent={<Icon name='folder' />}
dropDownToggleIconUpComponent={<Icon name='chevron-up' />}
dropDownToggleIconDownComponent={<Icon name='chevron-down' />}
selectedIconComponent={<Icon name='heart' />}
selectText='Choose some things...'
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={this.onSelectedItemsChange}
selectedItems={selectedItems}
IconRenderer={Icon}
/>
</View>
</View>
</SafeAreaView>
);
}
I get this error:
TypeError: undefined is not an object (evaluating 'item[subKey]').
I tried several code changes but I still can't get the same result as the original author video images.
Any help please?

Answer 1

I think your problem is that you need double quotation marks around the strings so uniqueKey="children" for each of them. Also there is no this. so you must make onSelectedItemsChange={this.onSelectedItemsChange} into onSelectedItemsChange={onSelectedItemsChange}