title: How do I access the data from a referenced firestore document?
body: <p>My data in firestore is structured as shown in the pictures. In my code, I am using a map of the <code>exercises</code> array within my <code>workout</code> document like this:</p>
  <pre><code>{workout.exercises.map((exercise) =&gt; {
      return (
          &lt;Text&gt;Want exercise name here&lt;/Text&gt;
      )
  </code></pre>
  <p>I believe I have to use <code>doc.data()</code> from <code>getDoc(exercise).then((doc) =&gt; </code> to get the actual values, but I can't seem to figure out how to actually render the exercise name. It's driving me crazy, any help would be greatly appreciated!</p>
  <p><a href="https://i.stack.imgur.com/LNA2x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LNA2x.png" alt="enter image description here" /></a></p>
  <p>This is the <code>exercise</code> object referenced in the <code>exercises</code> array from the picture above:</p>
  <p><a href="https://i.stack.imgur.com/XyfoO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XyfoO.png" alt="enter image description here" /></a></p>
  <p><strong>EDIT</strong>: If the <code>exercises</code> array only has one element, it works properly, but if it has &gt;1, the data seems to keep rendering infinitely which results in flashing and changing text.</p>
  <p><strong>EDIT2</strong>: Here's my full component code in case that helps:</p>
  <pre><code>export function WorkoutDisplayScreen({ navigation }) {
    const [workouts, setWorkouts] = React.useState([]);
    const workoutsArray = [];
    const [isFirstLoad, setIsFirstLoad] = useState(true);
    const [exerciseData, setExerciseData] = useState({});
  
    async function getData(exercise) {
      await getDoc(exercise).then((doc) =&gt; {
        setExerciseData(doc.data());
      });
    }
  
    const getWorkouts = async () =&gt; {
      console.log('Firebase READ &amp; WRITE');
      const workoutsCollection = collection(db, 'Users', auth.currentUser.uid, 'Workouts');
      const workoutsDocs = await getDocs(workoutsCollection);
      workoutsDocs.forEach((workout) =&gt; {
        workoutsArray.push(workout.data());
      });
  
      setWorkouts(workoutsArray);
    };
  
    useEffect(() =&gt; {
      console.log('Rendering...');
      if (isFirstLoad) {
        getWorkouts();
      }
      setIsFirstLoad(false);
    }, []);
  
    return (
      &lt;ScreenContainer&gt;
        &lt;View style={styles.headerrow}&gt;
          &lt;TouchableOpacity
            onPress={() =&gt; {
              navigation.goBack();
            }}
          &gt;
            &lt;AntDesign name=&quot;leftcircle&quot; size={24} color=&quot;black&quot; style={styles.headericon} /&gt;
          &lt;/TouchableOpacity&gt;
          &lt;Text style={styles.header}&gt;My Workouts&lt;/Text&gt;
        &lt;/View&gt;
  
        {workouts &amp;&amp;
          workouts.map((workout) =&gt; {
            return (
              &lt;View key={workout.id}&gt;
                &lt;View style={styles.workoutnamecontainer}&gt;
                  &lt;Text style={styles.workoutnametext}&gt;{workout.name}&lt;/Text&gt;
                &lt;/View&gt;
                {workout.exercises.map((exercise, index) =&gt; {
                  getData(exercise);
  
                  return (
                    &lt;View style={styles.exercisecontainer} key={index}&gt;
                      &lt;Text style={styles.exercisetext}&gt;{exerciseData.name}&lt;/Text&gt;
                      &lt;Text style={styles.exercisetext}&gt;{exerciseData.type}&lt;/Text&gt;
                      &lt;Text style={styles.exercisetext}&gt;{exerciseData.weight}&lt;/Text&gt;
                      &lt;Text style={styles.exercisetext}&gt;{exerciseData.reps}&lt;/Text&gt;
                    &lt;/View&gt;
                  );
                })}
              &lt;/View&gt;
            );
          })}
      &lt;/ScreenContainer&gt;
    );
  }
  </code></pre>
  <p><strong>EDIT3</strong>:
  I can now log the data in the correct format with, but trying to render it on screen is still not working correctly.</p>
  <pre><code>  const getWorkouts = async () =&gt; {
      console.log('Firebase READ &amp; WRITE');
      const workoutsCollection = collection(db, 'Users', auth.currentUser.uid, 'Workouts');
      const workoutsSnapshot = await getDocs(workoutsCollection);
      let workoutsDocs = workoutsSnapshot.docs;
      workoutsDocs.forEach((workout) =&gt; {
        workoutsArray.push(workout.data());
      });
      setWorkouts(workoutsArray);
  
      workouts.map((workout) =&gt; {
        workout.exercises.forEach((exercise) =&gt; {
          getDoc(exercise).then((doc) =&gt; {
            console.log(workout.name + ':');
            console.log(doc.data());
          });
        });
      });
    };
  </code></pre>