javascript - React component not rendering also not showing up - Stack Overflow

admin管理员组

文章数量:1430924

As you can see below the my react ponent 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 './ponents/counterComponent';

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

export default App;

As you can see below the my react ponent 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 './ponents/counterComponent';

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

export default App;

• javascript
• reactjs
• visual-studio-code

Share Improve this question Follow edited Oct 8, 2021 at 15:37 Andy 63.6k1313 gold badges7171 silver badges9898 bronze badges asked Oct 8, 2021 at 15:34 Debaditya SinhaDebaditya Sinha 4544 silver badges99 bronze badges 1

• 1 You should capitalize your ponent names so CounterComponent – kevin Commented Oct 8, 2021 at 15:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

First of all capitalize your ponent 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..

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

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

本文标签： javascriptReact component not rendering also not showing upStack Overflow