TypeError: Cannot read property 'undefined' of undefined

[sagarrs]

Hi all ,

I have created 2 multi select and on selection of 1st drop down the 2nd one should populate which is happening but when i again try to select another item from the 1st dropdown its throwing error as "TypeError: Cannot read property 'undefined' of undefined"

What i want to achieve ? when i select the bedroom from 1st drop down the 2nd dropdown populates, say i select "Apple , Strawberry" from 2nd drop down. Now i should be able to select LivingRoom from 1st drop down and when i select LivingRoom, the 2nd dropdown populates again and say i select "Merc, BMW" from 2nd drop down this time. I need all the data ["Apple", "Strawberry", "Merc", "BMW"] at the end

Please try this snack on your mobile to re-create the issue " https://snack.expo.io/@sagar293/react-native-sectioned-multi-select "

import React from 'react'
import {View, Text, StyleSheet} from 'react-native'
import SectionedMultiSelect from 'react-native-sectioned-multi-select';

class MultiSelect extends React.Component{
    constructor() {
        super();
        this.state = {
            rooms: [{id: 1, name: 'Bedroom'}, {id: 2, name: 'LivingRoom'}],
            selectedItems: [], bedroomSelect: [], newSelectItems: []
        };
    }

    onSelectedItemsChange = (selectedItems) => {
        const a = []
         const name = selectedItems.toString()
        if(name == "Bedroom"){
            a.push( 
                {name: 'Apple', id: 1,},
                {name: 'Strawberry', id: 2,},
                { name: 'Pineapple', id: 3,},
                {name: 'Banana', id: 4,},
                {name: 'Watermelon',id: 5,},
                {name: 'Kiwi fruit',id: 6,},)
    }else{
        console.log("false", name)
        a.push( 
         {name: 'Merc',id: 1,},
         {name: 'BMW',id: 2,},
         {name: 'Audi',id: 3,},)
    }
      this.setState(() => ({
          selectedItems: selectedItems,
          bedroomSelect: a
      }));
    };

    onSelectedNewChange = (newSelectItems) => {
        this.setState(() => ({
            newSelectItems: newSelectItems,
        }))
    }

  render(){
    return(
        <View style={styles.container}>
            <SectionedMultiSelect
                items={this.state.rooms}
                single={true}
                uniqueKey="name"
                selectText="Choose some things..."
                showDropDowns={true}
                readOnlyHeadings={false}
                onSelectedItemsChange={this.onSelectedItemsChange}
                selectedItems={this.state.selectedItems}
                />
            <SectionedMultiSelect
                items={this.state.bedroomSelect}
                uniqueKey="name"
                selectText="Choose some things..."
                showDropDowns={true}
                readOnlyHeadings={false}
                onSelectedItemsChange={this.onSelectedNewChange}
                selectedItems={this.state.newSelectItems}
                />
        </View>
        )
    }
}
export default MultiSelect

[sagarrs]

Solution: set " showChips={false} " in both the SectionedMultiSelect. please refer this snack for the working solution https://snack.expo.io/@sagar293/react-native-sectioned-multi-select

but the downside is we'll not be able to see the "chips"

  render(){
    return(
        <View style={styles.container}>
            <SectionedMultiSelect
                items={this.state.rooms}
                single={true}
                uniqueKey="name"
                selectText="Choose some things..."
                showDropDowns={true}
                readOnlyHeadings={false}
                onSelectedItemsChange={this.onSelectedItemsChange}
                selectedItems={this.state.selectedItems}
                showChips={false}
            />
            <SectionedMultiSelect
                items={this.state.bedroomSelect}
                uniqueKey="name"
                selectText="Choose some things..."
                showDropDowns={true}
                readOnlyHeadings={false}
                onSelectedItemsChange={this.onSelectedNewChange}
                selectedItems={this.state.newSelectItems}
                showChips={false}
            />
        </View>
        )
    }
}

[renrizzolo]

At a glance, the issue looks like you are removing a selected item from your list of items, so it can't look up the item any more when trying to display the chips