null is not an object (evaluating 'teachers.length') - arrays

Question

const [teachers, setTeachers] = useState([]);
const teachersList = async () => {
setLoading(true);
const storedValue = await AsyncStorage.getItem('#teachers_list');
if (!storedValue) {
setTeachers([]);
}
const list = JSON.parse(storedValue);
setTeachers(list);
setLoading(false);
}
useEffect(() => {
teachersList();
}, [isFocused])
return (
<SafeAreaView>
<ScrollView style={styles.mainContainer}>
{teachers.length == 0 ? (
<View style={styles.noData}>
<Text>Teacher List Empty</Text>
</View>
) : (
<>
{
teachers.map((teacher) => (
<View key={teacher.id} style={styles.productContainer} >
<View style={styles.productDetails}>
<Text> Name : {teacher.name}</Text>
<Text> Subject : {teacher.subject}</Text>
<Text> Email : {teacher.email}</Text>
</View>
<View style={styles.productButtonContainer}>
<TouchableOpacity style={styles.productActionEditButton} onPress={() => navigation.navigate("Edit", { teacher })}>
<Text> Edit </Text>
</TouchableOpacity>
<TouchableOpacity style={styles.productActionDelButton} onPress={() => deleteTeacher(teacher.id)}>
<Text> Delete </Text>
</TouchableOpacity>
</View>
</View>
))
}
</>
)}
</ScrollView>
</SafeAreaView>
)
The following code giving me an error. It was working when I was creating this application but now it's not working and showing me this error. I tried teachers && (code) but it is not working
null is not an object (evaluating 'teachers.length')

Answer 1

Edit: I just had to re-think the requirements of what you are doing
Instead of this:
teachers.length == 0 ? (
<View style={styles.noData}>
<Text>Teacher List Empty</Text>
</View>
)
try using this:
!teachers || teachers.length == 0 ? (
<View style={styles.noData}>
<Text>Teacher List Empty</Text>
</View>
)