Getting the Data from API to be able to display in the app

Question

I am facing an issue of displaying the information that i retrieved from the API. When i tried to display the information, i get the following error above. I have used two useeffect react hook one is to get the classid from the DynamoDB table based on the parameters i have provided when the page loads and another is to get the list of subjects based on the classid.

import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import {Calendar} from 'react-native-calendars';
import { API } from 'aws-amplify';
import React, { useEffect,useCallback,useRef,useState } from 'react'


const HomePage = () => {
  //use for navigating/redirect to other page
  const navigation = useNavigation();
  const handleUserIconClick = () => {
    //navigate to setting page
    navigation.navigate('Profile');
  };
  const [classid,setclassid] = useState("");
  const [data, setData] = useState([]);

  useEffect(() => { // Get the class id from the child table based on the guardianID 
    getData("7b11614e-a7eb-4223-bdf4-0ece9b634eb2")
},[])// <- this means it only run once

  useEffect(() => { // Get the subjects from the class table based on the classid
    getSubjects(classid)
},[classid]) // <- this means it will run once the classid changes

  
  const getData = async (GID) => {
    try {
      const apiData = await API.get('api55db091d', '/child/getclassid',{queryStringParameters:{
        GID:GID
      }})
      setclassid(apiData.data[0].ClassID)
      console.log("Here getData",apiData)
    } catch (error) {
      console.error(error);
    }
  };

  const getSubjects = async (classid) => {
    console.log("getsubjects ClassID",classid)
    try {
      const apiData = await API.get('api55db091d', '/class/getsubjects',{queryStringParameters:{
        ClassID:classid
      }})
      setData(oldArray => [...oldArray, apiData]);
      console.log("Here getSubjects",apiData)
    } catch (error) {
      console.error(error);
    }
  };

    return (
      <View style={styles.container}>
        <View style={styles.background}>
          <TouchableOpacity style={styles.topRight} onPress={handleUserIconClick}>
            <Ionicons name="person-outline" size={35} color="#FFFFFF" />
          </TouchableOpacity>
          <View style={styles.scrollContainer}>
            <Text style={styles.headerText}>Timetable:</Text>
            <ScrollView horizontal={true} contentContainerStyle={styles.scrollContent}>
            {
              data.map(data1 => {            
                return (
                  <View style={[styles.card, styles.cardElevated]}key={data1.ID}>
                  <Text style={styles.classText}>Subject: {data1.Subject}</Text>
                  <Text style={styles.classText}>Day: {data1.Day}</Text>
                  <Text style={styles.classText}>{data1.StartTime} - {data1.EndTime}</Text>
                </View>
                )
                
            })} 
            </ScrollView>
          </View>
          <Text style={styles.headerText}>Calendar:</Text>
          <View style={styles.calendar}>
          <Calendar  style={styles.calendartest}/>
      </View>
    
        </View>
      </View>
    );
  }

const { width, height } = Dimensions.get('window');
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    flex: 1,
    backgroundColor: '#B3EAE5',
  },
  topLeft: {
    position: 'absolute',
    top: height * 0.08,
    left: width * 0.05,
  },
  topRight: {
    position: 'absolute',
    top: height * 0.07,
    right: width * 0.05,
    zIndex: 1,
  },
  card: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: width * 0.65,
    height: height * 0.16,
    width: width * 0.60,
    height: height * 0.15,
    borderRadius: 4,
    margin: width * 0.05,
    backgroundColor: '#FFFFFF',
  },
  cardElevated: {
    elevation: 4,
    shadowOffset: {
      width: 1,
      height: 1,
    },
  },
  scrollContainer: {
    paddingTop: height * 0.15,
  },
  absentContainer: {
    paddingTop: height * 0.07,
  },
  welcomeText: {
    fontSize: height * 0.03,
    fontWeight: 'bold',
    fontStyle: 'italic',
    color: '#FFFFFF',
  },
  headerText: {
    fontSize: height * 0.025,
    fontWeight: 'bold',
    //marginBottom: height * 0.01,
    paddingHorizontal: width * 0.05,
    color: '#FFFFFF',
  },
  classText: {
    fontSize: height * 0.018,
    color: '#1DC1B1',
  },
  scrollContent: {
    alignItems: 'center',
  },
  endClassButton: {
    position: 'absolute',
    bottom: height * 0.05,
    right: width * 0.03,
    width: width * 0.2,
    height: width * 0.14,
    borderRadius: width * 0.1,
    backgroundColor: '#FFFFFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  endClassText: {
    position: 'absolute',
    bottom: height * 0.01,
    right: width * 0.03,
    fontWeight: 'bold',
    fontSize: height * 0.024,
    color: '#FFFFFF',
  },

  calendar:{
    paddingTop: height * 0.02,
    alignItems:'center',
  },
});
export default HomePage;

I have tried many ways but could not figure that what went wrong. I am expecting to be able to display the data that i have gotten from the API into the app.

Here is the error that i have

Here is just some tracking to determine what is going on

Answer 1

I would imagine that maybe you miss something like having classId as a dependency on the second use effect hook, if you want help please share some of your code.

After back and forth with the user we solved the issue, it was just a miss setStatement from the backend since his backend has data in the response.

I would advise to check this: Some helpful keywords and general expressions in js

but specifically this since it's in your code now: ?. explanation

given your style of code maybe lodash get method would help you: lodash get

vs code has a nice extension called prettier, please for the love of god format your code. I always have it format on save to get rid of the hassle.

pretter extension for vs code