title: react native : What is the way to populate the EmergencyRolePicker picker in data with a map function rather than hardcoded?
body: <p>What is the way to populate the EmergencyRolePicker picker in data with a map function rather than hardcoded?
  In my example I am trying to populate the picker but I want to do it with a map loop so I can select something from the picker.
  The picker comes from the react-native-paper library.
  I would be happy for some help with this issue.</p>
  <p><strong>this is my code:</strong></p>
  <pre><code>import { List } from 'react-native-paper';
  
  
  export const ActionsScreen = () =&gt; {
    const [roleList, setRoleList] = useState([]);
  
  
    useEffect(() =&gt; {
      (async () =&gt; {
        try {
          // State table
          const emcStateList: EmergencyStateType[] = await EmergencyStateTable.getEmergencyStateList();
          console.log('emcStateList:', emcStateList.length);
          let items = [];
          emcStateList.forEach(function (item, i) {
            items.push({ label: item.EmergencyName, value: item.EmergencyCode, key: i });
          })
          setStateList(items);
          // Role table
          const emcRoleList: EmergencyRoleType[] = await EmergencyRoleTable.getEmergencyRoleList();
          console.log('emcRoleList:', emcRoleList.length);
          items = [];
          emcRoleList.forEach(function (item, i) {
            items.push({ label: item.RoleName, value: item.RoleCode, key: i });
          })
          setRoleList(items);
          //
        } catch (error) {
          console.log('A problem getting emergency list from db:', error);
        }
      })();
    }, []);
  
  
    const EmergencyRolePicker = () =&gt; {
      return (
        &lt;List.Accordion title={roleList[0].label} id=&quot;0&quot;&gt;
          &lt;List.Item title={roleList[1].label} /&gt;
          &lt;List.Item title={roleList[2].label} /&gt;       
        &lt;/List.Accordion&gt;
      )
    }
    return (
      &lt;&gt;
        &lt;SafeAreaView style={styles.container}&gt;
          &lt;ScrollView style={styles.scrollView}&gt;
            &lt;View style={styles.text}&gt;
              &lt;Text style={styles.label}&gt;{MenuStrings.EmergencyRole}&lt;/Text&gt;
              &lt;View style={styles.pickerView}&gt;
                &lt;EmergencyRolePicker /&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/ScrollView&gt;
        &lt;/SafeAreaView&gt;
        &lt;View style={styles.BottomViewArea}&gt;
          &lt;TouchableOpacity
            style={{ alignSelf: 'flex-start', marginLeft: 60 }}
            onPress={() =&gt; {
            }}&gt;
            &lt;Ionicons
              name=&quot;send-sharp&quot;
              size={30}
              color=&quot;white&quot;
            /&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p><strong>this is the data:</strong></p>
  <pre><code>[
     {
        &quot;key&quot;:0,
        &quot;label&quot;:&quot;red&quot;,
        &quot;value&quot;:1
     },
     {
        &quot;key&quot;:1,
        &quot;label&quot;:&quot;green&quot;,
        &quot;value&quot;:2
     },
     {
        &quot;key&quot;:2,
        &quot;label&quot;:&quot;yellow&quot;,
        &quot;value&quot;:3
     }
  ]
  </code></pre>