Set Selected items in react native multi select

Question

I want to select the selected items which i already select & save at backend after that if i get response then set already selected those items which i have set in react native multi select here is my code for react native multiselect

//Example Multiple select / Dropdown / Picker in React Native
import React, { Component } from "react";
//Import React
import { View, Text, Picker, StyleSheet, SafeAreaView } from "react-native";
//Import basic react native components
import MultiSelect from "react-native-multiple-select";
//Import MultiSelect library

//Dummy Data for the MutiSelect
this.items = [
  { id: "1", name: "America" },
  { id: "2", name: "Argentina" },
  { id: "3", name: "Armenia" },
  { id: "4", name: "Australia" },
  { id: "5", name: "Austria" },
  { id: "6", name: "Azerbaijan" },
  { id: "7", name: "Argentina" },
  { id: "8", name: "Belarus" },
  { id: "9", name: "Belgium" },
  { id: "10", name: "Brazil" }
];

export default class App extends Component {
  state = {
    //We will store selected item in this
    selectedItems: [
      { id: "1", name: "America" },
      { id: "2", name: "Argentina" },
      { id: "3", name: "Armenia" },
      { id: "4", name: "Australia" }
    ]
  };

  onSelectedItemsChange = selectedItems => {
    this.setState({ selectedItems });
    //Set Selected Items
  };

  render() {
    const { selectedItems } = this.state;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1, padding: 30 }}>
          <MultiSelect
            hideTags
            items={items}
            uniqueKey="id"
            ref={component => {
              this.multiSelect = component;
            }}
            onSelectedItemsChange={this.onSelectedItemsChange}
            selectedItems={selectedItems}
            selectText="Pick Items"
            searchInputPlaceholderText="Search Items..."
            onChangeInput={text => console.log(text)}
            tagRemoveIconColor="#CCC"
            tagBorderColor="#CCC"
            tagTextColor="#CCC"
            selectedItemTextColor="#CCC"
            selectedItemIconColor="#CCC"
            itemTextColor="#000"
            displayKey="name"
            searchInputStyle={{ color: "#CCC" }}
            submitButtonColor="#48d22b"
            submitButtonText="Submit"
          />

          <View>
            {this.multiSelect &&
              this.multiSelect.getSelectedItemsExt(selectedItems)}
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

what do you mean by select the selected item which you already selected? — whd.nsr
clearly explain What is your question? you mean, after api call, then how to make it selected item as highlighted.? — Ravi Kumar Karunanithi
suppose i have list of array inside multiselect & i select two to three items from that list after that i calll save data API , then again i want to edit or select some more items or remove some items at that time,when i open that screen i got selected items response but I can't set that data that is the issue — maninder singh

Ravi Kumar Karunanithi Ravi Kumar Karunanithi · Accepted Answer · 2019-10-09T13:10:39

Got it.

this.state={
  selectedData: "158" // list of id here(without space, that is your response of api)
};

 <MultiSelect          
     .....
     .....
     selectedItems={selectedData}
 />
 <View>
     {this.multiselect ? this.multiSelect.getSelectedItemsExt(selectedData): null}
 </View>

Set Selected items in react native multi select

2 Answers