Unable to pass fetched firebase data into functional component

Question

New to react native (expo), and I'm trying to figure out how to pass through some data I've pulled from firestore into a functional component

let tileItems = [];

interface LocationTile{
  placeID: string;
  imgURL: string;
  destination: string;
}

const LocationTile = [{
  placeID: 'id123',
  imgURL: 'https://img2.storyblok.com/1000x1118/filters:format(webp)/f/51678/1000x1118/603ad64c98/itinerary-hero-mobile-1-lapb.jpg',
  destination: 'PARIS'
}];

const data = LocationTile;
const user = auth.currentUser

const GetDestinations = async ()=> {
  const destinationsCollection = collection(db, "/users/" + user.uid + "/Destinations")
  const tripsSnapshot = await getDocs(destinationsCollection);
  const tripsList = tripsSnapshot.docs.map(doc => doc.data());
  
  LocationTile.push({
    placeID: tripsList[0].placeID,
    imgURL: tripsList[0].imgURL,
    destination: tripsList[0].text}
  )
  console.log(VisionTile) // line 38
  return data;
}

const VisionCard:FC<{item: LocationTile }> = ({item}) => {

///
///
console.log(LocationTile); // line 49
///
///

I can see that I am successfully pushing the first result from firebase into the LocationTile array, but the functional component doesn't see the appended item.

Result from console.log(VisionTile) on line 38

Array [
  Object {
    "destination": "PARIS",
    "imgURL": "https://img2.storyblok.com/1000x1118/filters:format(webp)/f/51678/1000x1118/603ad64c98/itinerary-hero-mobile-1-lapb.jpg",
    "placeID": "id123",
  },
  Object {
    "destination": "Venice",
    "imgURL": "https://img2.storyblok.com/1000x1118/filters:format(webp)/f/51678/1000x1118/603ad64c98/itinerary-hero-mobile-1-lapb.jpg",
    "placeID": "ChIJKUgTyxaqfkcREH-QFYcJBwM",
  },
]

result of console.log(LocationTile) on line 49

Array [
  Object {
    "destination": "PARIS",
    "imgURL": "https://img2.storyblok.com/1000x1118/filters:format(webp)/f/51678/1000x1118/603ad64c98/itinerary-hero-mobile-1-lapb.jpg",
    "placeID": "id123",
  },
]

I am unsure how to properly load the functional component only after the data pull from firebase is complete. Moving const VisionCard:FC<{item: LocationTile }> = ({item}) => { has only produced reference errors later in the code when I try to move it to another function.

Answer 1

This feels somewhat sloppy to me, but it got the job done.

const [tileItems, updateTiles] = useState(data)
      const [pullComplete, updatePullComplete] = useState(false)
  
      useEffect(() => {
        GetDestinations();
        setTimeout(() => {
          if(pullComplete === false){
            console.log("pulled")
            updateTiles(data)
            updatePullComplete(true)
          }
          updatePullComplete(true)
        }, 500);
      });