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},
];

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},
];

• javascript
• reactjs
• react-native
• dropdown

• you should use state to handle dynamic data changes with a re-render... for example useState for functional ponents, check this link: https://reactjs/docs/hooks-state.html – Mohammad Esmaeilzadeh Commented Oct 18, 2021 at 8:59
• could u please explain with a example – Juhi Kukreja Commented Oct 18, 2021 at 9:09
• You can map the array and then you can show the named and can also get the id of the selected data – Mantu Commented Oct 18, 2021 at 9:15
• @JuhiKukreja If my answer helped you please accept it. – Mantu Commented Oct 19, 2021 at 3:56

1 Answer 1

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>
  );
}