I don't know how and why I'm getting this error in React.
I'm trying to build this components:
render() {
return (
<div>
<div>ShopsList</div>
{this.state.loading || !this.state.shops ?
(
<div></div>
) :
(
<div>
{this.state.shops.map(shop=>Shop(shop))} # Line with the error
</div>
)
}
</div>
)
}
but the program won't compile and gives the following message:
This expression is not callable. Type '{ Shop: typeof Shop; }' has no call signatures
Shop
is imported in the following way
import Shop from '../Shop';
with the folder ../Shop
having the following structure:
Shop/
Shop.tsx
index.tsx
and index.tsx
has this content:
import Shop from "./Shop";
export default {Shop}
Shop has been defined in this way, which has a constructor:
import React from 'react';
export interface IShopProps {
id: number;
name: string;
phone_number?: string;
}
class Shop extends React.Component<IShopProps, {}> {
constructor(props: IShopProps) {
super(props);
}
render() {
return (
<div className='shopRow'>
<div className='shopName'>{this.props.name}</div>
<div className='shopNumber'>{this.props.phone_number ? this.props.phone_number : "numero non disponibile"}</div>
</div>
)
}
};
export default Shop;
What am I doing wrong? I already tried looking up on SO for that message and I found this post, but to me it doesn't seem I have done the same error.
Edit: I also tried as suggested by @Viet:
{this.state.shops.map((shop, index) => <Shop key={index} {...shop} />)}
and still get the error:
JSX element type 'Shop' does not have any construct or call signatures. TS2604
Because Shop
is the component so you should use it with <>
:
{this.state.shops.map((shop, index) => <Shop key={index} {...shop} />)}
The problem is you import Shop
wrong way. Just update import
in your component where you use Shop
component like this:
import { Shop } from "../Shop" // from index file
Or like this
import Shop from "../Shop/Shop" // from Shop file