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

228
Visualizações
React component not rendering also not showing up

As you can see below the my react component is not rendering also in vscode its greyed out (line 2 first picture). Dont know what I am doing wrong

import React, { Fragment, useEffect } from 'react';
import counterComponent from './components/counterComponent';

function App() {
  return (
    <Fragment >
      <h1>hello</h1>
      <counterComponent/>
    </Fragment>
  )
};

export default App;

app.js

enter image description here

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

0

First of all capitalize your component names. so CounterComponent instead of counterComponent.

Second you're exporting counterComponent twice.

export const ....

and export default in the bottom. Choose one and change your import according to whichever you choose..

about 4 years ago · Juan Pablo Isaza Relatório

0

You need to import counter component with {} As its export const Import {CounterComponet} from …

about 4 years ago · Juan Pablo Isaza Relatório

0

because you are doing something wrong counterComponents correctly, look at you App.js file or the second Image and look at line number 2(it is a little dark-ish) because you are not using it right. Also you are default and modular exporting counterComponent do any one of them, I usually do it like this

import React, { Fragment} from "react";

function counterComponent () {
    return (
        <Fragment>
            <h1>hello</h1>
        </Fragment>
    );
}

export default counterComponent;

If that doesn't work, My suggestion is check again if there is not any spelling mistake or you are importing from the right location

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