React app is stuck at loading at loading and doesn't render the component

April 2, 2023

I am unable to render header component in the App component. Not sure if something has changed in react 18, it just keeps on loading on the local host. Please find the code snippet below. Could someone please help?

Header.jsx

import React from 'react'

function Header() {
  return (
    <Header className='container'>
        <h2>React App</h2>
    </Header>  
  )
}

export default Header

App.js

import Header from "./components/Header"
function App() {
    return (
        <>
          <Header/>
        </>
    )
}
export default App

Index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import './index.css'
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
);

>Solution :

it seens you are not using ang ui-kit that includes a component name <Header/> then ,i guess your root tag : <Header></Header> in Header.jsx is wrong, do you mean <header></header> ?