• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

221
Vistas
This expression is not callable. Type '{ Shop: typeof Shop; }' has no call signatures. React

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

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda