I have a react native app. And I try to check if a array of objects has length 0.
So I have this:
export const SubCategoryScreen = ({ route, navigation }) => {
const [subCatgoryList, setSubCategoryList] = useState([]);
const [isLoading, setLoading] = useState(true);
useEffect(() => {
fetchSubCategoryData(route.params.subcategories).then((data) => {
if (data.animals.length > 0) {
setSubCategoryList(data.animals);
setLoading(false);
} else {
setSubCategoryList(data.subcategories);
setLoading(false);
}
});
}, [route]);
return (
<SafeArea>
{isLoading && (
<LoadingContainer>
<ActivityIndicator animating={true} color={MD2Colors.green200} />
</LoadingContainer>
)}
<CategoryList
data={subCatgoryList}
renderItem={({ item, index }) => {
console.log(item);
return (
<TouchableOpacity
onPress={() => navigation.navigate("groepen", { subcategories: item.id })}
disabled={
isLoading || (item.subcategories.length === 0 && item.animals.length === 0)
}>
<Spacer position="bottom" size="large">
<SubCategoryInfoCard subcategories={item} />
</Spacer>
</TouchableOpacity>
);
}}
keyExtractor={(item) => item.id}
/>
</SafeArea>
);
};
And the error occuried on this part:
disabled={isLoading || (item.subcategories.length === 0 && item.animals.length === 0)}
and the api call looks like:
{
"id": 6,
"name": "haviken",
"description": "haviken",
"legislation": "",
"review": "",
"eaza": "",
"images": "http://192.168.1.68:8000/media/photos/categories/peregrine_falcon.jpg",
"animals": [],
"subcategories": [],
"category": "http://192.168.1.68:8000/api/categories/3/"
}
So it seems that both: animals and subcatgories are empty.
Question: How to check if array of objects is empty?