0

I'm trying to render an array of workout objects from a firestore database in react native, but I'm not getting any data showing up on my screen. There is definitely data at the location of the workouts collection and I can see the data from console.logging as well.

I'm not sure if it's an error in function logic or an error with how I'm trying to render the data.

export function TestScreen() {

const [workouts, setWorkouts] = React.useState([]);

  const getWorkouts = async () => {
    const workoutsCollection = collection(db, 'Users', auth.currentUser.uid, 'Workouts');
    const workoutDocs = await getDocs(workoutsCollection);
    workoutDocs.forEach((workout) => {
      setWorkouts([...workouts, workout.data()]);
    });

  };

  useEffect(() => {
    getWorkouts();
  }, []);

  return (
    <View>
      <Text>{auth.currentUser.uid}</Text>
      <Text>{auth.currentUser.phoneNumber}</Text>

      {workouts &&
        workouts.map((workout) => {
          <Text>{workout.name}</Text>;
        })}
    </View>
  );
}
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
kobo
  • 31
  • 3
  • 2
    I dont know how react native works but shouldnt you return Text component when mapping – Min Jul 18 '22 at 00:19
  • I look forward to the follow up question where you wonder why you're getting duplicate data. _Hint:_ build up the workout data array then set it into state once... `setWorkouts(workoutData)` – Phil Jul 18 '22 at 00:23
  • Yup, I had to return the text component as well as push each workout into an array, then store that array into the workouts state when it was done. Thanks for the help! – kobo Jul 18 '22 at 11:54

0 Answers0