title: React native Picker item list binding with fetch request and selecting an item
body: <p>Need to bind a list of sports taken from a fetch request in useEffect() to react-native Picker and select a sport from the picker.item to a variable. Found a <a href="https://stackoverflow.com/questions/62513668/using-react-native-picker-to-display-fetched-array">Solution</a> using a class-based component. Would need a solution in a functional component with network binding and item selection</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import { Picker } from '@react-native-picker/picker';
  
  // Functional Component
  export default function PlayerRegistration() {
  
  // Picker.item List
  const [listofsports, setListOfSports] = useState([])
  // Selected Item variable
  const [selectedItem, setSelectedSport] = useState()
  
  // Fetch Function
   const getListOfPlayersList = () =&gt; {
          const api = API();
          console.log('working backendapi', api)
          const sportscentersapi = `${api}/sports`;
  
          const test = fetch(sportscentersapi, {
              method: 'GET',
              headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
              }
          })
              .then(response =&gt; response.json())
              .then(data =&gt; {
                  //console.log(data),
                  setListOfSports({ listofsports: data })
              });
      }
  
  // ComponentDidmount or ComponentDidUpdate Equivalent
  useEffect(() =&gt; {
          getListOfPlayersList();
  // Returning list looks similar to this.
  //[{ &quot;idsport&quot;: 1, &quot;sportname&quot;: &quot;Badminton&quot; }, { &quot;idsport&quot;: 2,&quot;sportname&quot;: &quot;Golf&quot;}]
  
  });
  
  // JSX
      return ( &lt;Picker
                  selectedValue={selectedItem}
                  onValueChange={(itemValue, itemIndex) =&gt;
                      setSelectedSport(itemValue)
                  }&gt;
                  {
  
                  listofsports.map((item, index) =&gt; {
                      return (&lt;Picker.Item
                          key={index}
                          label={`${item.sportname.toString()}`}
                          value={`${item.sportname}`} /&gt;)
                  })
  
                  }
              &lt;/Picker&gt;)
  
  }
  
  </code></pre>