Question 73300 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to disable click item in array of obects? – Reactjs

I try to disable a item that is part of an array of objects for the user.

So I have this api data:

{
    "id": 17,
    "name": "bulldog",
    "description": "bulldog",
    "legislation": "",
    "review": "",
    "eaza": "",
    "images": "http://192.168.1.68:8000/media/media/photos/categories/bulldogs.png",
    "animals": [
        {
            "id": 6,
            "name": "Olde English Bulldogge",
            "description": "Olde English Bulldogge",
            "images": "http://192.168.1.68:8000/media/media/photos/animals/Olde_English_Bulldogge.png"
        },
        {
            "id": 7,
            "name": "French bulldog",
            "description": "French bulldog",
            "images": "http://192.168.1.68:8000/media/media/photos/animals/French_bulldog.png"
        }
    ],
    "subcategories": [],
    "category": "http://192.168.1.68:8000/api/categories/13/"
}

And a user can click on the id with 17 and then the user sees to more items in this case: 6 and 7. But I try to disable the click function on these two items: 6 and 7.

So I have this component:

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>
    );
};

But of course the items with id 6 and 7 don’t have both the propertie animals and subcategories.

Question: how to disbable the items in the array of animals?

Tags:

2

Answers


  1. 0

    You could use something like this, here we first check if the item has subcategories and then check for the length. Same with the animals.

    Currently it will return false if the item has either a subcategories or animals props. If you want both required, you can change the || to a &&.

    const hasSub =
  (item.subcategories && item.subcategories.length === 0) ||
  (item.animals && item.animals.length === 0);

renderItem={({ item, index }) => {
  return (
    <TouchableOpacity
      onPress={() => navigation.navigate("groepen", { subcategories: item.id })}
      disabled={isLoading || hasSub}
    >
      ...
    </TouchableOpacity>
  );
}}
    Login or Signup to reply.
  2. 0

    You can try something like

    disabled={isLoading || (!item.hasOwnProperty('animals') && !item.hasOwnProperty('subcategories'))}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search