How to dynamically add data(dropdown list) from api in react-native-select-dropdown?

Question

I am using react-native-select-dropdown and set data array statically but don't know how to set data array dynamically from apis with id

Code :

  const countries = ["Egypt", "Canada", "Australia", "Ireland"]

  <SelectDropdown
  data={countries}
  // defaultValueByIndex={1}
  // defaultValue={'Egypt'}
  onSelect={(selectedItem, index) => {
    console.log(selectedItem, index);
  }}
  defaultButtonText={"Select"}
  buttonTextAfterSelection={(selectedItem, index) => {
    return selectedItem;
  }}
  rowTextForSelection={(item, index) => {
    return item;
  }}
/>

how to set countries array list dynamically and i need both title and id of selected item, the fetching data from api are:

const countries = [
  {namd: 'Egypt', id: 1},
  {namd: 'Canada', id: 2},
  {namd: 'Australia', id: 3},
  {namd: 'Ireland', id: 4},
];

you should use state to handle dynamic data changes with a re-render... for example useState for functional components, check this link: https://reactjs.org/docs/hooks-state.html — Mohammad Esmaeilzadeh
– Mohammad Esmaeilzadeh, Commented Oct 18, 2021 at 8:59
You can map the array and then you can show the named and can also get the id of the selected data — Mantu
– Mantu, Commented Oct 18, 2021 at 9:15

Mantu · Accepted Answer · 2021-10-18 09:46:44Z

7

Here is an example from your code as per your requirement. In below code dropdown menu will show the country names and when you select any one of them, then it will print the selected country and id. You can use the useState hook to manage API calls. I have shown you the example how you can manage the response for dropdown.

You can check this snack example I just made - https://snack.expo.dev/hRpKm2bdg

const countries = [
  {namd: 'Egypt', id: 1},
  {namd: 'Canada', id: 2},
  {namd: 'Australia', id: 3},
  {namd: 'Ireland', id: 4},
];


export default function App() {
  return (
    <View>
     <SelectDropdown
    data={countries}
    onSelect={(selectedItem, index) => {
        console.log('selected Country name ->>>>',selectedItem.namd)
        console.log('selected Country Id ->>>>',selectedItem.id)
    }}
    buttonTextAfterSelection={(selectedItem, index) => {
        // text represented after item is selected
        // if data array is an array of objects then return selectedItem.property to render after item is selected
        return selectedItem.namd
    }}
    rowTextForSelection={(item, index) => {
        // text represented for each item in dropdown
        // if data array is an array of objects then return item.property to represent item in dropdown
        return item.namd
    }}
     />
    </View>
  );
}

edited Oct 18, 2021 at 9:46

answered Oct 18, 2021 at 9:33

Mantu

1,0971 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juhi Kukreja Over a year ago

Thanku soo much ... :}

Collectives™ on Stack Overflow

How to dynamically add data(dropdown list) from api in react-native-select-dropdown?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related