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

I’m rendering CollectionItem components inside CollectionsList component

There’re 4 main state variables in CollectionList component.

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?

[rschristian]

@daoanhthanh

1. That’s not actually using Preact so you might’ve gotten a bit lost? React repo can be found here if you’re (still) having issues: https://github.com/facebook/react
2. Hooks were introduced in React v16.8. That example is using 16.1.1. Update the React versions and you should be good to go!

[rschristian]

Certainly no worries! And I might be a tad biased, but Preact is a pretty neat React alternative that you might want to take a look at some day! We’d love to have you.

https://preactjs.com/