toystars / react-native-multiple-select

Simple multi-select component for react-native
MIT License
565 stars 313 forks source link

Warning: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string. #88

Open braianj opened 5 years ago

braianj commented 5 years ago

Issue summary

Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string

Library versions

{
  "name": "my-new-project",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "@mapbox/geo-viewport": "^0.4.0",
    "expo": "^30.0.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "react-native-autocomplete-input": "^3.6.0",
    "react-native-blur": "^3.2.2",
    "react-native-elements": "^0.19.1",
    "react-native-loading-spinner-overlay": "^1.0.1",
    "react-native-multiple-select": "^0.4.4",
    "react-native-storage": "^1.0.0-beta.1",
    "react-navigation": "^2.9.3"
  },
  "devDependencies": {
    "jest-expo": "30.0.0"
  }
}

Steps to Reproduce

(Write your steps here:)

  1. touch to select from multi select
  2. return warning
  3. but still works and send info as spected

Reproducible Code

 _renderMultiselect = (item, item_selected, item_selected_name, label) => {
    return (
      <View>
        <Spinner
            visible={this.state.spinner}
            textContent={'Cargando...'}
            textStyle={{color: Colors.tintColor}}
            color={Colors.tintColor}
            overlayColor={'rgba(0, 0, 0, 0.75)'}
          />
        <FormLabel labelStyle={ styles.label }>{label}</FormLabel>
        <View style={{marginLeft: 20, marginRight: 20}}>
          <MultiSelect
            items={item}
            uniqueKey="id"
            displayKey="name"
            onSelectedItemsChange={selectedItems => this.setState({[item_selected_name]: selectedItems })}
            selectedItems={item_selected}
            selectText="Seleccionar"
            searchInputPlaceholderText="Buscar..."
            tagRemoveIconColor={Colors.mainBackground}
            tagBorderColor={Colors.mainBackground}
            tagTextColor={Colors.tintColor}
            selectedItemTextColor={Colors.tintColor}
            selectedItemIconColor={Colors.tintColor}
            textColor={Colors.tintColor}
            itemTextColor={Colors.extraTintColor}
            searchInputStyle={{ color: Colors.tintColor }}
            submitButtonColor={Colors.tintColor}
            submitButtonText="Seleccionar"
          />
        </View>
      </View>
    );
  };
Yevpak commented 5 years ago

Same when setting uniqueKey="id"

AugustoAleGon commented 5 years ago

Can you please try the latest version? 0.5.2?

iKonstX commented 5 years ago

Does the item object contain a property called "name" and is it a string?

           uniqueKey="id"
           displayKey="name"

Set the property names of your object.

d-spiridonov commented 5 years ago

just make that the id in the list is not a number but a string e.g.:

 [{
    id: '1',
    name: 'test1'
  }]
dovanan95 commented 3 years ago

just make that the id in the list is not a number but a string e.g.:

 [{
    id: '1',
    name: 'test1'
  }]

This method solved issue.