Getting "Cannot call a class as a function" in my React Project
Solution 1:
For me it happened when I forgot to write extends React.Component
at the end.
I know it's not exactly what YOU had, but others reading this answer can benefit from this, hopefully.
Solution 2:
For me it was because I forgot to use the new
keyword when setting up Animated state.
eg:
fadeAnim: Animated.Value(0),
to
fadeAnim: new Animated.Value(0),
would fix it.
Solution 3:
tl;dr
If you use React Router v4 check your <Route/>
component if you indeed use the component
prop to pass your class based React component!
More generally: If your class seems ok, check if the code that calls it doesn't try to use it as a function.
Explanation
I got this error because I was using React Router v4 and I accidentally used the render
prop instead of the component
one in the <Route/>
component to pass my component that was a class. This was a problem, because render
expects (calls) a function, while component
is the one that will work on React components.
So in this code:
<HashRouter>
<Switch>
<Route path="/" render={MyComponent} />
</Switch>
</HashRouter>
The line containing the <Route/>
component, should have been written like this:
<Route path="/" component={MyComponent} />
It is a shame, that they don't check it and give a usable error for such and easy to catch mistake.
Solution 4:
Happened to me because I used
PropTypes.arrayOf(SomeClass)
instead of
PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))