'TypeError: useState is not a function or its return value is not iterable

I'm using Preact which is basically React, but without need for build tools.

There're 4 main state variables.

  1. rawCollections which holds all of the collections.
  2. allCollections which holds all of the collections in raw collections with filtering applied.
  3. collectionsToShow which holds the number of collections to load/show.
  4. loadedCollections which holds the loaded collections.

Everytime filtering is applied, allCollections is updated accordingly, which results in updating of loadedCollections.

loadedCollections is mapped to CollectionItem components which has their own state variable in them, defined by useState.

The problem:

Sometimes when filtering is applied, and loadedCollections is updated I get the following error inside one of the CollectionItem components:

TypeError: useState is not a function or its return value is not iterable

The line causing error inside CollectionItem:

const [currentPage, setCurrentPage] = useState(1);

I don't see any apparent reason for this to happen, so what can that be?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source