How to populate with data stored

Issue summary

I need to use it in the profile screen with the data already populated to update.

Library versions

{ "@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" }

Expected Behavior

It should show the selected items number, the selected items when I show the list and the list of item select next to the input

(Write what you thought would happen.)

Actual Behavior

I have the data already loaded but when I change the state of selected data it shows as selected items of it doesn't show the items selected and I can select the same again

(Write what happened. Add screenshots!)

Reproducible Code


  componentWillMount() {
    getTherapyType().then(data => {
      this.setState({ therapy_type: data });
    });
  }
  componentDidMount() {
    this._fillUserData();
  }

  _fillUserData = async () => {
    const userData = await storage.load({key: "loggedData"});

    var therapy_type_selected = new Array();

    userData.therapyType.map(function(index, elem) {
      therapy_type_selected.push({id: index.id, name: index.name}); 
    })

    this.setState({ 
      therapy_type_selected:therapy_type_selected
    });
  };

  _renderMultiselect = (item, item_selected, item_selected_name, label) => {
    item.map(function(index, elem) {
      item[elem].id = index.id.toString();
    })
    return (
      <View>
        <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>
    );
  };

  render() {
    const {
      therapy_type_selected,
      therapy_type,
    } = this.state;

    return (
      <ScrollView>
          <View>
            <Card titleStyle={ styles.cardTitle } dividerStyle={ styles.cardDivider } containerStyle={ styles.card } title="Datos de Registro">

            {this._renderMultiselect(therapy_type, therapy_type_selected, 'therapy_type_selected', 'Tipo de Terapia')}

            <Button
              raised
              icon={{name: 'login', type: 'entypo'}}
              title='Save' 
              onPress={this.save}
              buttonStyle= { styles.buttonRegister }
            />
            </Card>
          </View>
      </ScrollView>
    );
  }

toystars / react-native-multiple-select