Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

199
Visualizações
react cannot call a class as a function

I'm only using functional components in my project and despite that, I'm getting this error: Uncaught TypeError: Cannot call a class as a function.

This is part of the parent component where I get the error: (the problem is with the "withCheckCountry" component)

<Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/reset-password/:token" component={RestPass} />
        <Route path="/programs" component={About} />
        <Route path="/login" component={Login}>
          {loggedIn() && <Redirect to={redirectionPath()} />}
        </Route>
        <Route path="/signUp" component={SignUp}>
          {loggedIn() && <Redirect to={redirectionPath()} />}
        </Route>
        <Route
          path="/country/:countryCode"
          component={withCheckCountry(CountryApp, availableCountry, loadingCountry)}
        />

        <Redirect to="/" />
      </Switch>

and here is the "withCheckCountry" component:

import React, {useState, useEffect, memo} from 'react';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';
import { toast } from 'react-toastify';
import ToastBody from "components/toastBody/toast";
import { FormattedMessage, injectIntl } from "react-intl";

const withCheckCountry = (Component, availableCountry, loadingCountry) => ({
  ...props
}) => {
  //console.log("props = "+JSON.stringify(props));
  if (!loadingCountry) {
    const { countryCode } = props.match.params;
    const isCountryExist = availableCountry.some(
      country => country.countryCode === countryCode.toLocaleUpperCase(),
    );
    const [errorTitle, setErrorTitle] = useState(intl.formatMessage(messages.errorTitle));
    const [countryNotExist, setCountryNotExist] = useState(intl.formatMessage(messages.countryNotExist));

    useEffect(() => {
      setErrorTitle(intl.formatMessage(messages.errorTitle));
      setCountryNotExist(intl.formatMessage(messages.countryNotExist));
    }, [intl]);

    if (!isCountryExist) {
      toast(() => <ToastBody title={errorTitle} message={countryNotExist} />);  
      return <Redirect to="/" />;
    }
  }
  return <Component {...props} />;
};

withCheckCountry.propTypes = {
  availableCountry: PropTypes.object,
};

export default injectIntl(withCheckCountry);

this error didn't show up until I added "injectIntl" when exporting the component, and I need that to get intl from props as you can see in the documentation here if you are interested.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

you are calling "withCheckCountry" component as if it was a function:
try this:

<Route path="/country/:countryCode" component={(props) => <withCheckCountry {...props} />} />
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda