How to make dynamic picker in react native functional component?

I have to to some task which is create a dynamic picker option. But I tried some options on internet and most of the options are explaint using class components. But I need to go with the functional component. The purpose of the creating picker is to select a product by its name.(So picker indicate its name on the labels). But inside this, I need to call post request with that selected product's ID, not it's name. So I also need to get Product ID as a input when selecting a option (as product Name) from picker.

Following is the productDetails finally gets on console.

  {"data": [{"accountCoordinatorEmail": null, "category": "edu", "createdAt": null, "createdBy": null,       "customerEmail": "c@gmail.com", "modifiedAt": null, "modifiedBy": null, "productID": 111,   "productName": "e-School", "projectManagerEmail": null},  

So as example I need to post productID = 111 as a input while selecting productName as a e-school from the picker. How should I implement that. I saw some mapping function in the class component examples. But I cant understand from class components.

import React, {useEffect, useState} from 'react';  import {View, StyleSheet} from 'react-native';  import {Picker} from '@react-native-picker/picker';  import AsyncStorage from '@react-native-community/async-storage';      const ProductPicker = () => {      const [selectedValue, setSelectedValue] = useState('');      const [productDetails , setproductDetails] = useState([]);        useEffect(() => {          getProductList();      }, []);        const getProductList = async () => {           const token = await AsyncStorage.getItem('userToken');            fetch("http://10.0.2.2:3000/customer/get-all-products", {                method: "post",              headers: {                  'Content-Type': 'application/json',                  'Authentication': `Bearer ${token}`              },          })              .then((response) => response.json())              .then((json) => setproductDetails(json.data))              .catch((error) => console.error(error))        };        return (          <View style={styles.container}>              <Picker                  selectedValue={selectedValue}                  style=                  onValueChange={(itemValue, itemIndex) => {                      setSelectedValue(itemValue);                  }}              >                                </Picker>          </View>      );  };    const styles = StyleSheet.create({      container: {          flex: 1,          paddingTop: 40,          alignItems: 'center',      },  });    export default ProductPicker;  

https://stackoverflow.com/questions/66927238/how-to-make-dynamic-picker-in-react-native-functional-component April 03, 2021 at 10:36AM