hoaphantn7604 / react-native-element-dropdown

A react-native dropdown component easy to customize for both iOS and Android.
MIT License
1.01k stars 173 forks source link

React.Children.only expected to receive a single React element child #164

Open macvish opened 1 year ago

macvish commented 1 year ago

Hi, I'm currently experiencing an issue with Multiselect:

Error: React.Children.only expected to receive a single React element child.
This error is located at:
    in TouchableWithoutFeedback (created by TouchableWithoutFeedback)
    in TouchableWithoutFeedback
    in RCTView (created by View)
    in View
    in Unknown (created by MultiSelectDropdown)
    in RCTView (created by View)
    ....

React native version: 0.70.5

hoaphantn7604 commented 1 year ago

hi @macvish , Are you using default or customize?

macvish commented 1 year ago

hi @macvish , Are you using default or customize? @hoaphantn7604

I don't understand what you mean by default or customize, this is what I have currently rendered

....
import { MultiSelect } from 'react-native-element-dropdown'
...
return <Flex  style={{ marginBottom: 20 }}>
        <Text weight='bold' style={styles.label}>{!!label && label}</Text>
        <MultiSelect
            {...props}
            style={styles.dropdown}
            placeholderStyle={styles.placeholderStyle}
            selectedTextStyle={styles.selectedTextStyle}
            inputSearchStyle={styles.inputSearchStyle}
            iconStyle={styles.iconStyle}
            placeholder={placeholder}
            value={selectedValues}
            onChange={onChangeValues}
            renderSelectedItem={renderSelectedItem}
            selectedStyle={styles.selectedStyle}
            renderItem={renderItem}
            activeColor={colors.primaryLight}
        />
    </Flex>
...
jeanmarie15 commented 1 year ago

The problem seems to be in the renderSelectedItem prop, I had it returning null and then I changed it to return an empty view, which worked for me. before: renderSelectedItem={() => { return null }} after: renderSelectedItem={(item, unSelect) => (<View />)}