How to Import Component in React JS-CodePudding

I am trying to import Header Component in App.js but it's giving error.

import './App.css';
import Headers from './Components/Header';

function App() {
  return (
    <div>
    </Headers>
    </div>
  );
}

export default App;

Header.js

import React from "react";

export default function Headers(){
 
    return (
        <div>
        Header Demo
        </div>
    );
    
}

Header.js file exist in src/Components

Compiled with problems:X

ERROR in ./src/App.js

Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /home/sanad/Documents/newapp/src/App.js: Expected corresponding JSX closing tag for . (8:4)

CodePudding user response：

Your problem has nothing to do with importing the module.

Read the error message carefully:

SyntaxError: /home/sanad/Documents/newapp/src/App.js: Expected corresponding JSX closing tag for <div>.

This is because you have a closing tag (</Headers>) but the next element that needs to be closed in <div>.

Your problem is that you need to open the <Headers> element first.

<div>
    <Headers></Headers>
</div>

CodePudding user response：

import React from "react"; add this to App.js